icon does not appear in the flyout MAUI

Question

I want to display in my flyout each time an icon and then the text. What I did is that I took the code from the documentation of Microsoft or it suggests to do like that:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

This is what it should look like

and this is what I have

<Shell x:Class="dateCalculator.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:dateCalculator"
    xmlns:controls="clr-namespace:Xaminals.Controls"
    Shell.FlyoutBehavior="Flyout"
    FlyoutHeaderBehavior="Fixed"
    FlyoutVerticalScrollMode="Auto"
    FlyoutWidth="{OnPlatform WinUI='525',MacCatalyst='525'}"
    FlyoutBackgroundColor="{AppThemeBinding Light={StaticResource LightObject}, Dark={StaticResource DarkGrey}}"
    FlyoutIsPresented="{Binding IsFlyoutOpen}">
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10,10,0,10">
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontSize="Small"
                       FontAttributes="Bold"
                       VerticalOptions="Center"/>
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem Title="Calculette" Icon="menu_black.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:Basic}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="Calculer différence de date">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:date}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="Convertir des distance">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:ConvDistance}"/>
        </Tab>
    </FlyoutItem>
</Shell>

and this is what it gives me

and here is the image if it can help you

Answer 1

This is the problem for the icons , try to remove it.

 <Shell.ItemTemplate>
    <DataTemplate>
        <Grid Padding="10,10,0,10">
            <Label Grid.Column="1"
                   Text="{Binding Title}"
                   FontSize="Small"
                   FontAttributes="Bold"
                   VerticalOptions="Center"/>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

This is working

<FlyoutItem Title="Calculette" Icon="icon_about.png">
    <Tab>
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
     </Tab>
</FlyoutItem>
<FlyoutItem       
    Title="Calculer différence de date" Icon="icon_feed.png">
    <Tab>
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
</FlyoutItem>
<FlyoutItem
    Title="Convertir des distance" Icon="icon_about.png">
    <Tab>
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
</FlyoutItem>