androidxamarinxamarin.formsapp.xaml

Using Material Design Icons with Xamarin Forms - What Am I Missing?

I am trying to modify the default Xamarin Forms (Flyout) App template to use Material Design Icons for the FlyoutItem icons, instead of the supplied .png files. I have tried to follow this blog post by James Montemagno, and tried to use his Hanselman.Forms project as a reference... but I'm missing something.

Note: At this point, I don't have access to an iPhone or a Mac, so I'm just concentrating on the Android project.

I have done the following steps:

  1. Imported the materialdesignicons-webfont.ttf file into the Assets folder and double-checked that its Build Action is set to AndroidAsset.
  2. Added the following to the App.xaml file:
<OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
   <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>

<x:String x:Key="IconAbout">&#xf2fd;</x:String>
  1. Modified the AppShell.xaml to change the icon:
<FlyoutItem Title="About">
   <FlyoutItem.Icon>
      <FontImageSource Glyph="{StaticResource IconAbout}"
                       FontFamily="{StaticResource MaterialFontFamily}" 
                       Color="Black"/>
   </FlyoutItem.Icon>
   <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

This is a direct copy from the Hanselman.Forms project's TabItem - I thought the FontFamily would have to be a DynamicResource, but apparently not, because it works as is in that project, but doesn't work in mine either way - the icon is always blank (actually, if I change the Glyph to a letter A I get an "A" for an icon, but that's not really helpful).

I'm missing some dumb little detail that I just can't see.

Solution

  • The source of the error is here:

    <x:String x:Key="IconAbout">&#xf2fd;</x:String>

    Changing that character code to &#xf02df; got everything working - one missing zero and the result is chaos. Many thanks to @shaw and @tommy99 - trying to implement their answer (and it still not working) led me to the solution. I've upvoted their solution/comments in thanks.