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 fo

Solution 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:

<ShellContentTitle="About"ContentTemplate="{DataTemplate local:AboutPage}"
                      ><ShellContent.Icon><FontImageSourceFontFamily="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.

Solution 2:

The source of the error is here:

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

Changing that character code to 󰋟 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.