Xamarin.Forms: Font Icons

In this post I’m going to show how to display font icons in a Xamarin.Forms application. This will expand on my previous post about how to use a custom font so if you’re not familiar with that I suggest taking 5 minutes to have a quick read here. I’m going to use the Material Design Icons font so download the zip file and grab the materialdsignicons-webfont.ttf file from the Fonts folder; import it into your Xamarin.Forms project as explained in my previous post, and you’re good to go!

Getting the glyph codes

Now, before we can use the font we need to find out the specific character codes for each icon in the font that we want to use. While reading up on using icon fonts I came across a post by James Montemagno that points to a tool by Andrei Nitescu, called IconFont2Code. IconFont2Code will allow you to generate a C# class file that contains all the Unicode values for any characters that you select, all you need to do is upload the font!

Once you have selected the required character codes copy the generated class into your project. I tend to put things like this into a Constants folder at the root level of the project.

Using a font icon

Now that we have everything in place we can finally use the icon font! We can use any element that has a FontFamily property associated with it and set the Text property. There are a few different ways you an use the icons so lets take a look.

XAML x:Static

To use the constant property to reference the icon you first need to add the relevant namespace to the page e.g. xmlns:consts="clr-namespace:XF.CustomFonts.Constants". Once this is done you should be able to access the class that you added to the project earlier within XAML using x:Static as shown below.

<Label
    FontFamily="MaterialDesignIcons}"
    Text="{x:Static consts:FontIcons.Xamarin}"/>

<Label

FontFamily="MaterialDesignIcons}"

Text="{x:Static consts:FontIcons.Xamarin}"/>

XAML Binding

In order to use bindings you need to create a view model that exposes the icon that will be bound to the UI element.

public class FontIconPageViewModel
{
    public string AndroidIcon => FontIcons.Android;
}

public class FontIconPageViewModel

{

public string AndroidIcon => FontIcons.Android;

}

Make sure to set the BindingContext of your page to the view model

public FontIconPage()
{
    InitializeComponent();
    BindingContext = new FontIconPageViewModel();
}

public FontIconPage()

{

InitializeComponent();

BindingContext = new FontIconPageViewModel();

}

Then simply set up a binding in the same way you would with any other property.

<Button
    FontFamily="MaterialDesignIcons"
    Text="{Binding GithubIcon}"/>

<Button

FontFamily="MaterialDesignIcons"

Text="{Binding GithubIcon}"/>

FontImageSource

If you want to use a font icon with an image based element you should use a FontImageSource and set the Glyph property to the character code of the icon you would like to use.

<Image>
    <Image.Source>
        <FontImageSource
            FontFamily="MaterialDesignIcons"
            Glyph="{x:Static consts:FontIcons.Microsoft}"/>
    </Image.Source>
</Image>

<Image>

<Image.Source>

<FontImageSource

FontFamily="MaterialDesignIcons"

Glyph="{x:Static consts:FontIcons.Microsoft}"/>

</Image.Source>

</Image>

That’s it! You’re now set up to use font icons with a Xamarin.Forms app 👍

Screenshots

Repo

Dark Mode

XF.CustomFonts (this link opens in a new window) by chowarth (this link opens in a new window)

Sample project that shows how to use custom fonts within a Xamarin.Forms application