How to add an icon to a flyoutitem?

Question

I have the following code in which I am trying to add an icon to

<FlyoutItem Title="Products" Style="{StaticResource ProductFlyout}">       
 <ShellContent Title="Product List" ContentTemplate="{DataTemplate page:ProductsListPage}" />
</FlyoutItem>

I have tried adding the following to no success (just providing the general syntax used)

<FlyoutItem.Icon> <UriImageSource /> </FlyoutItem.com>

<FlyoutItem>
 <ShellContent>
        <ShellContent.Icon>
            <Image/>
        </ShellContent.Icon>
    </ShellContent>
</FlyoutItem>

UPDATED

So I have this section at the top that has the title(and the code that defines it). The title appears through the title keyword in the ShellContent Tag.

I wish for the icon to also appear here, next to the title

 <FlyoutItem Title="Product List" Style="{StaticResource HomeFlyout}">
   <ShellContent Title="Product List"/>
  </FlyoutItem>

Not sure how else to add the icon/image. If anyone knows it would be great

Answer 1

Have you tried using source in image tag?

<Image Source="0849b3176cec0e8f7fe3.png"></Image> 

Answer 2

You can add the Icon to the FlyoutItem element. Here is the sample:

 <FlyoutItem Icon="image.png" Title="Products" Style="{StaticResource ProductFlyout}">       
     <ShellContent Title="Product List" ContentTemplate="{DataTemplate page:ProductsListPage}" />
    </FlyoutItem>

More information you can refer to Flyout display options.