Using icon fonts in your Xamarin Forms apps

Bitmap madness

One of the most tedious parts of mobile development, particularly if you are a one-person team, is creating graphic assets.

If you are using images for icons in your UI then you will know the pain of creating different resolution images to support the different target devices of Android and iOS.

A modern icon font can help relieve some of that pain, particularly if you need icons representing common objects or actions – like you would use for a typical menu system, for instance.

In this example we’ll use FontAwesome to provide us with a huge selection of icons that we can use at any size or colour to brighten up our app.

Icon fonts and a custom renderer to the rescue

Including an icon font in your Xamarin Forms app is pretty straightforward, both on Android and iOS.

We’ll start by including the font file in the platform apps, then we’ll extend the Label control to be a FontAwesomeLabel. Thats about it for iOS. On Android we’ll need a small custom renderer to tell it the font name, but it’s not much work.

Including the font

Firstly, download and include the font file in the platform projects. In the Android project the file is under Assets/Fonts with a build action of AndroidAsset. In the iOS project, the file goes under Resources/Fonts with a build action of BundleResource. Note that the Fonts folder is just personal preference.

You also need to add an entry to the iOS info.plist:

<key>UIAppFonts</key>
<array>
 <string>Fonts/FontAwesome.otf</string>
</array>

Extend the Label control

Back in the PCL, add a new class called FontAwesomeLabel and extend the Label control with the following:

using Xamarin.Forms;

namespace FontIconApp.UserControls
{
    public class FontAwesomeLabel : Label
    {
        public static readonly string FontAwesomeName = "FontAwesome";

        //Parameterless constructor for XAML
        public FontAwesomeLabel()
        {
            FontFamily = FontAwesomeName;
        }

        public FontAwesomeLabel(string fontAwesomeLabel = null)
        {
            FontFamily = FontAwesomeName;
            Text = fontAwesomeLabel;
        }
    }

    // https://github.com/neilkennedy/FontAwesome.Xamarin/blob/master/FontAwesome.Xamarin/FontAwesome.cs
    // For a huge list of icon codes
    public static class Icon
    {
        public static readonly string FAGlass = "\uf000";
        public static readonly string FAMusic = "\uf001";
        public static readonly string FASearch = "\uf002";
        public static readonly string FAEnvelopeO = "\uf003";
    }
}

I’ve only included 4 icon names here, but you can see a much bigger selection in the example project.

Use it in XAML

Use the new control in your XAML like so:

<userControls:FontAwesomeLabel Text="{x:Static userControls:Icon.FAMusic}"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="18"
TextColor="CornflowerBlue" />

Don’t forget to include the relevant namespaces in the header of your XAML.

For iOS that’s all you need. On Android there’s just one more step. You’ll need to add a custom renderer to tell Android the name of the font with it’s full path and extension (e.g. “Fonts/FontAwesome.otf”).

In the Android platform project, add a custom renderer like the one below. I like to put all the renderers into a CustomRenderers folder and namespace.

using Android.Graphics;
using FontIconApp.Droid.CustomRenderers;
using FontIconApp.UserControls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(FontAwesomeLabel), typeof(FontAwesomeLabelRenderer))]

namespace FontIconApp.Droid.CustomRenderers
{
    public class FontAwesomeLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement == null)
            {
                Control.Typeface = Typeface.CreateFromAsset(Forms.Context.Assets,
                    "Fonts/" + FontAwesomeLabel.FontAwesomeName + ".otf");
            }
        }
    }
}

Wrap-up

Icon Fonts are a simple way to add some polish to your Xamarin Forms apps without the work of creating multiple graphical assets.

You can download the example code at the XamarinInsider repo.