Display MAUIIcon in normal Page

Question

I'm developing a .NET MAUI App. It has an MAUIIcon as AppIcon, so far so good.

But how is it possible to display this icon in an normal XAML contentPage?

I tried to use ImageSource.FromFile("AppIcon.png") but that doesent work. Even as trying to get it as embedded ressource.

Best regards

Answer 1

You can copy the AppIcon image to the \Resource\Images folder and set its build action as MauiImage.

And then use it in the XAML:

<Image Source="AppIcon.png"/>

Update:

If you don't want to copy the file. You can try to use it by edit the following code in the Project's .csproj file:

<ItemGroup>
    <!-- App Icon -->
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />

    <!-- Splash Screen -->
    <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />
    <MauiImage Include="Resources\AppIcon\*" />
    <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />
    <MauiImage Update="Resources\AppIcon\appicon.svg" BaseSize="168,168" />
    <!-- Custom Fonts -->
    <MauiFont Include="Resources\Fonts\*" />

    <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
    <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>

After this, you don't have to copy the app icon file. You can use it directly.

<Image HeightRequest="100" WidthRequest="100" Source="appicon.png"/>

Note: You can see the default MauiIcon contains two file: appicon.svg and appiconfg.svg. So if you use the default Source="appicon.png", you will only seem a purple image.