Why aren't the icons shown in a TabBar in MAUI?

Question

I have the following TabBar and, according to Microsoft documentation, the icons should just be shown:

<TabBar>
    <Tab Icon="home.png" Title="Home">
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
    <Tab Icon="home.png" Title="Garden">
        <ShellContent Title="Garden" ContentTemplate="{DataTemplate local:Garden}" />
    </Tab>
</TabBar>

The icon is located in the Resources/Images folder and is of type "MauiImage"

When building it for Windows, I am expecting the icons to be shown, instead squares are displayed in their place:

Am I missing something or how can I make the icons be shown?

Answer 1

Firstly, you should use a black and white image and the icons would be shown. Secondly, you may need the icon with svg format and then consume it in png. I used the default svg file: dotnet_bot.svg in the Resources/Images folder. It can show the icons as expected.

Below is the running output and xaml for your reference:

    <TabBar> 
        <Tab Icon="dotnet_bot.png"    Title="Home" >
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>


        <Tab Icon="dotnet_bot.png"  Title="Garden">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
    </TabBar>