Getting Started with Xamarin

Download the whole icon pack as a ZIP and inside you will find the required .ttf file.

To use the Font file you first need to add it to each OS project.

Place the file inside the Assets folder (Not the Resources folder!) and be sure to set it's Build type to AndroidAsset, you can do this by right clicking on the file and selecting properties.

Place the file inside the Resources folder and be sure to set its Build type to BundleResource.

Also on iOS, you have to include the file in the info.plist so that it can be found and used.

<key>UIAppFonts</key>
<array>
    <string>materialdesignicons-webfont.ttf</string>
</array>

Place the file inside the Assets folder and be sure to set it's Build type to Content.

Now that each of the OS projects have the file in their respective Assets folders we need to set-up and use the font pack where we need it in the Shared Project. The best way I have found to do this is to add the new Font pack as a Resource to the shared Resource Dictionary, so add to either your App.Xaml or the Page.Xaml you want the font/icon used on. You will notice that I have set the Key (3rd line down) to 'IconFont' this is your name for the Font pack and can be set to what ever naming convention you choose but you will match it up later.

<ResourceDictionary>
    <OnPlatform x:TypeArguments="x:String"
                x:Key="IconFont">
        <On Platform="Android"
            Value="materialdesignicons-webfont.ttf#Material Design Icons" />
        <On Platform="iOS"
            Value="Material Design Icons" />
        <On Platform="UWP"
            Value="/Assets/materialdesignicons-webfont.ttf#Material Design Icons" />
    </OnPlatform>
</ResourceDictionary>

As you can see we need to add an entry for each OS as they each have different values. For IOS you leave the file extension off, but for Android and UWP it needs the .ttf extension and they also have:

#Material Design Icons

This is the actual name of the Font inside the .ttf file.

So now we are set-up and in a position to add the text and icons to our Buttons and Labels and this is the easy bit, as you just need to set the FontFamily with the Static Resource name you gave in your Resource Dictionary above, so in this case 'IconFont'

<Button Text="&#xf844;"
    TextColor="Green"
    BackgroundColor="Transparent"
    FontFamily="{StaticResource IconFont}"
    FontSize="Medium" />

Binding icons

<Button Text="{Binding Icon}"
   TextColor="Green"
   BackgroundColor="Transparent"
   FontFamily="{StaticResource IconFont}"
   FontSize="Medium" />

public string Icon {get;set;}

Icon = "\U000F844";

As you can see, you can set the rest of the Text formatting as normal Color, Size etc and these will also work from CSS if you using that new and very cool ability within XamarinForms, if your not now is your chance to go look at the docs XamarinForms with CSS

Well if you look at the Text I have set for the button above you will see it looks like I just slapped the keyboard... but no that string has meaning...



The '&#x' and trailing ';' are standard and ensure that the Font Pack gives back an Icon and not text like ABC123. The part in the middle that starts with 'f' is the icon Unicode within the font pack so in this case...

f844

The awesome part is that as it's just plain text you can if your feeling adventurous make this a Binding to your ViewModel and change the Icon's on the fly.

If you find looking around on the Materialdesignicons website difficult as a search will show the icon and it's name rather than the ID then I found this web tool CharacterMap that you can load the .ttf file into and it shows the icon and all of it's details including the important 'f' unicode

@Font-Face is not currently supported in Xamarin style sheets.