Icon Fonts made Easy

Coming from a Pre-Xamarin background of web development, I have always loved fonts like Font Awesome. Naturally I was pretty excited that Xamarin.Forms finally added a FontImageSource to make it easier to use Font based Icons, but it still frankly was a pain to use. 

Why Out of Box Is Terrible

Ok this might sound a little harsh, but to be honest even the geekiest among us don't go around memorizing and quoting unicode characters, so if you want to be able to use your custom icons you almost certainly need to create some sort of Mapping class.

public static class FontAwesomeBrands
    public const string FontFamily = "fa-brands-400.ttf";

    public const string TwitterSquare = "\uf081";
    public const string FacebookSquare = "\uf082";
    public const string Linkedin = "\uf08c";

Now this is a little better because at least now we have made it human readable for which icon we're using and which font we've used... but it's still pretty verbose...

<Label Text="{x:Static fonts:FontAwesomeBrands.TwitterSquare}" />

Of course this probably also dismisses the fact that all we want to do is set the text to our icon here, but we also had to specify the FontFamily. While there are several common approaches here we'll just say it might look like this:

<Label Text="{x:Static fonts:FontAwesomeBrands.TwitterSquare}"
       FontFamily="{x:Static fonts:FontAwesomeBrands.FontFamily}" />

Hitting that Easy Button

Luckily there's a new package in town that aims to help simplify this allowing you to cut down on the complexity. Built on top of the Embedded Fonts introduced in Xamarin.Forms 4.5, the AP.MobileToolkit.Forms.Fonts, not only has a long package name, but helps package and consume icon fonts. Currently in preview it ships with packages for Font Awesome Free. 

To get started with Font Awesome all you need to do is install any of the Font Awesome packages and register the Font with the Font Registry in your Application.

public partial class App
    public App()

With that little bit of code your application is now ready to use either font. Now you just need to consume it. With the Icon XAML extension it really couldn't be easier. Naturally we'll want to figure out which icon we want to use, just as if we weren't using Xamarin.

If we do a quick search on the Font Awesome website we'll get something like this. Since we love how easy it is to use this we'll use the grin-hearts icon to reflect it. 

Of course when we look at our icon we can see the unicode, but that isn't overly helpful or readable... but if we look at the classes that are used on the web this helps us easily identify that it's the Grin-Hearts icon in Font Awesome Regular, so we'll use this with the Toolkit's Icon extension.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    <Label Text="{ap:Icon 'far fa-grin-hearts'}" />

Ok now I know some of you may be thinking this looks great except this is still a magic string. Well the AP.MobileToolkit has you covered there as well so you could alternatively do:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    <Label Text="{ap:Icon {x:Static ap:FontAwesomeRegular.GrinHearts}}" />


Just like that we have a working custom font, installed via NuGet. It took a very simple line of code to setup in our App and then we were free to easily use it throughout our app.

Next Steps

Xamarin Forms UI Development Made Easy with LiveXAML

I'm all about working with XAML in my Xamarin Forms apps. Developers coming from a WPF background have been used to some great tooling for visually styling their XAML for years. Xamarin Forms of course isn't so cut and dry for the obvious reason that we're dealing with an Abstraction of the UI. Chances are you've probably heard about Xamarin's Live Player. To be honest I think it's a cute idea, but really lacks what you need to be most productive. 

Naturally one of the biggest pains when working with XAML is getting the Styling just right. We do have more tools now at our disposal like the XAML Previewer in Visual Studio and Visual Studio Mac, but it lacks the touch and feel component of styling. This is where LiveXAML is making a huge difference in developing Xamarin Forms applications. LiveXAML not to be confused with Xamarin's Live Player, allows you to get the updates directly in your actual app. LiveXAML is truly one of the most amazing products I've ever worked with for XAML. 

It really is as simple as installing a single NuGet package and running the application in your Simulator or on your Device. Now you can actually see what your changes are doing, without rebuilding, in an app that is fully functional. There are no short cuts, no limitations like we see with the Live Player or the Previewer.

There are a number of challenges that are hard to handle without a data context behind them. One of them is handling a ListView with a DataTemplateSelector. It's certainly one thing to refine a single ViewCell, but when you have multiple cells that each need to be styled there is no substitute for having real working data which can only happen with your app actually running. This is one the many scenarios where using LiveXAML can really shine as you quickly update the styling and see the changes in your app. 

If you haven't had a chance to check it out head over to http://livexaml.com

The Hamburger Menu with Prism Forms

How many times have you heard someone ask about a Hamburger menu in Xamarin Forms? It's a topic that comes up fairly frequently and it seems there are two distinct camps. Those who will tell you it's drop dead simple, and those who are stuck trying to figure out why if it's so simple, they can't figure it out. Honestly there are already a ton of YouTube videos and Blog Posts on the topic, so much so that I didn't want to touch the subject. However there is still a ton of confusion about the "Secret Sauce".


I would like to think the reality is somewhere in between. So often I find the major reason for these types of disagreement, has more to do with mis-managed expectations. For those stuck trying to figure out how to implement the Hamburger Menu, I think there are two key "gotcha's".


I've seen a number of blogs on the topic, but it seems like they're quick to say just use a MasterDetailPage. Ok you're done, you don't have to go home, but don't stay here. But that isn't the whole story. I've seen some blogs that do make more of a point to tell you that your Detail Page must be wrapped in a NavigationPage. But again, that just isn't the whole story.


So how on earth do you get that hamburger menu? Well for starters, you don't go to McDonalds (or for those in my neck of the woods, In N Out). When people ask about the "hamburger menu" they aren't asking how do you implement a slide out menu in your app. But that's what we keep telling people. In order to get the "hamburger menu", you need images. See people kept telling you it was easy. The secret sauce is to add an Icon to the Master page of the MasterDetailPage. Xamarin actually does this in their sample, but seems to gloss over the importance.


Since I'm a Prism guy though, let me go over the creation of a Prism App with a Hamburger Menu. I will assume you have the basic Prism App setup.


public partial class App : PrismApplication
    public App( IPlatformInitializer initializer = null ) 
        : base( initializer )


    protected override void OnInitialized()

    protected override void RegisterTypes()
        // So on and so forth...
You'll notice here that there are three View's I'm registering. The first is just simply the Xamarin Forms NavigationPage. There's no magic here. The next is my MainPage, which I will go more into detail. And lastly I register ViewA which is just some View that I will have as a Detail Page.

<?xml version="1.0" encoding="UTF-8"?>
        <!-- Hamburger Menu Secret Sauce... Add an Icon!!!! Make sure it's in your resources for your Platform Project -->
        <NavigationPage Title="Required Foo" Icon="hamburger.png">
                <ContentPage Title="Menu">
                    <StackLayout Padding="40">
                        <Label Text="{Binding UserName,StringFormat='Hello, {0}'}" />
                        <Button Text="View A" Command="{Binding NavigateCommand}" CommandParameter="Navigation/ViewA?message=Did%20you%20see%20the%20secret%20sauce%3F" />
                        <Button Text="View B" Command="{Binding NavigateCommand}" CommandParameter="Navigation/ViewB?message=Told%20you%20Prism%20Rocks%21%21%21" />
                        <Button Text="View C" Command="{Binding NavigateCommand}" CommandParameter="Navigation/ViewC?message=Does%20the%20hamburger%20make%20you%20hungry%3F%3F%3F" />
All code means stuff, and there's a bit going on. Whether I'm coding or not, I'm generally a very light hearted kind of guy that likes to joke around. So you'll notice here the Navigation Page that I have as the MasterDetailPage.Master, has a title of "Required Foo". That is because Title is a required field for the Master, while the Icon is optional. The icon when supplied hides the title. I mentioned that a NavigationPage is a requirement for the "Hamburger Menu", but that is for the Detail, NOT the Master. I am choosing to use the NavigationPage in my Master in this sample, not because I expect actual navigation within the 'Menu', but rather because it quickly gives me the ability to add a nice Header and Toolbar Menu Items.

Now before you go all crazy trying to figure it out. You can download this zip for the Hamburger Icon assets for Android and iOS.