C#, .Net and Azure

Font Icons in Xamarin Forms

2020/08/15

Xamarin Forms has supported custom fonts for a while. Combined with fonts such as Fontawesome it makes it easy to use cool icons without having to worry about scaling or theming them.

Here’s an app using fontawesome icons that automatically adjust to a theme change:

light dark

Thanks to xamarin’s FontImageSource the icons can be used in buttons, toolbars and pretty where anywhere images can be used as well as labels!

You can find the source on github.

Prior to using such fonts, icons had to be scaled appropriately for each platform (hdpi, xhpdi, .. for android, @2x, @3x for iOs, ..) which meant a lot of duplicate versions of icons where necessary (usually 10+ versions).

Worse yet, black and white versions of each icon where needed to properly adjust to themes and had to be handled manually. I specifically built icon-converter to automatically scale the icons for all platforms.

This saved me from having to A) manually scale the icons and B) having to check in duplicate image files (a single high res icon would be checked in instead and the converter would run during build to generate all icons in their appropriate sizes on the fly).

With font icons this is now all obsolete and it is very easy to use custom glyphs (that scale properly thanks to fonts being vector graphics) and not have to worry about scaling or theming!

Even cooler is the embedded fonts feature that allows you to embedd a single font file into the shared xamarin assembly so there is a central place for the font file.

Unfortunately it still has a bug that prevents it from working on UWP and it looks like the bug won’t be fixed until Xamarin 5.

Until it is fixed you can always use the Link existing item feature to link the same file into all platform projects. That way the file doesn’t have to be checked in multiple times.

There are also many free fonts that provide hundreds of glyphs for all kinds of icons. Check out glyphsearch.com to search for icons across common fonts such as FontAwesome and Material.

And if you need custom icons, you can always use the icomoon.io app to create your own font based of svg files.

If you only have images there are also plenty image to svg converts online that work surprisingly well (of course the quality is never as good as manually crafting an svg, but the results are still very good and especially for smaller icons almost not noticable).

If you have a font you can upload your font to IconFont2Code to have it generate C# that you can then easily reference in your xaml.

I have put a sample demonstrating the use of fontawesome in xamarin on github.