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

Question

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>

3. 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.

Answer 1

I've gotten it to work.

First of all, go to this GitHub repo and download this material font family as a .tff file. Click on the 'font' file in the repo and download MaterialIcons-Regular.ttf.

Link: https://github.com/google/material-design-icons

Place the .tff file in your shared project.

Now reference the font in the assemblyinfo.cs file like so:

[assembly: ExportFont("MaterialIcons-Regular.ttf", Alias = "Material")]

Set the build action as 'embedded resource' on the .tff file. Do not forget this step!

Go this page https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints - to view all of the material codepoints.

In this case I will use the 'alarm-add' icon as an example (because why not). If you want to use the 'alarm-add' icon - find the 'alarm-add' codepoint. In this case the code for the 'alarm-add' icon's codepoint is e856.

Paste the following code into your shell:

      <ShellContent Title="About"
                      ContentTemplate="{DataTemplate local:AboutPage}"
                      >
            <ShellContent.Icon>
                <FontImageSource FontFamily="Material"
                                 Color="White"
                                 Glyph="&#xe856;">
                </FontImageSource>
            </ShellContent.Icon>
            
            
        </ShellContent>

If you follow all of the steps - the result should be like so:

If - by any chance - you want to use material icons outside of your shell you can create a Label which has the font family set as Material and as the Text property you can set the appropriate codepoint. Remember to include &#x before the codepoint - and always end it with a semicolon.

You can customise the colours and icon to whatever you like - just search the codepoint document for the icon you want and paste the codepoint which identifies that particular icon.