CODEWITHSUNDEEP
xamarinxamarin.forms
Sam
Sam

Reputation: 30344

Using icons instead of PNG in Xamarin Forms Tabs

How do I use icons e.g. Material Icons instead of PNG iamges in my tabs in a Xamarin Forms app with Shell?

The following is how I defined tabs for home screen in my Xamarin Forms app:

<FlyoutItem Title="Home">
   <FlyoutItem.Icon>
      <FontImageSource
         FontFamily="MISHRP"
         Glyph="{StaticResource HomeIcon}"
         Color="White" />
   </FlyoutItem.Icon>
   <Tab Title="Dashboard" Icon="icon_dashboard.png">
      <ShellContent Route="Dashboard" ContentTemplate="{DataTemplate views:Dashboard}" />
   </Tab>
   <Tab Title="My Feed" Icon="{StaticResource Feed}">
      <ShellContent Route="MyFeed" ContentTemplate="{DataTemplate views:MyFeed}"/>
   </Tab>
</FlyoutItem>

As you can see in above code, in the first tab item (Dashboard), I use a PNG image and that displays fine in my app.

In the second TAB item (My Feed), I tried using an icon I defined in my App.xaml page but that doesn't show at all.

How do I use icons in tabs in a Shell Xamarin Forms app?

Upvotes: 1

Views: 364

Answers (1)

Bas H
Bas H

Reputation: 2226

I think you use something like this , from the MyCoffeeApp

https://github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/AppShell.xaml

  <Tab.Icon>
            <FontImageSource FontFamily="FAS"
                         Color="{AppThemeBinding 
                                Dark=White, 
                                Light={StaticResource SystemGray5Dark}}"
                         Glyph="{StaticResource IconCoffee}"/>
        </Tab.Icon>

Upvotes: 2

Related Questions