It would be much better all round to use vector graphics instead, but as (at the time of writing) native support for SVGs on both iOS and Android is patchy at best it’s no surprise that there’s no vector graphics support in Xamarin.Forms.
Fortunately there’s a decent workaround for monochrome vector graphics – use a custom font instead. You can either use an existing icon font such as Google’s excellent Material Icons set or the ones from Font Awesome, or use a tool such as IcoMoon which enables you to create your own font from SVG files created in Illustrator or similar.
So here’s how you do it, for the purposes of this tutorial we’re going to be applying Google’s Material Icons font to the Xamarin.Forms.Label control but the same approach can be used for different fonts and controls (e.g. Xamarin.Forms.Button).
You can download a .zip file for the project here.
1. Create A Custom Control
Just so we don’t get confused we’re going to create our own subclass of Xamarin.Forms.Label called IconLabel. Add a new empty class file to your shared project like so…
using System;
using Xamarin.Forms;
namespace CustomFontDemo
{
public class IconLabel:Label
{
public IconLabel ()
{
}
}
}
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CustomFontDemo" x:Class="CustomFontDemo.CustomFontDemoPage"> <local:IconLabel Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" /> </ContentPage>
2. Import Your Custom Font Into Your iOS Project
Right-click on the Resources directory in your iOS project and select ‘Add Files’. Navigate to the font file you have chosen on your hard drive and add it to the project. Once the file has been added right-click on it and check the ‘Build Action’ is set to ‘BundleResource’.
Where To Import The Font File On iOS
Now select your ‘info.plist’ file and click the ‘Source’ tab. Right-click anywhere in the editor and select ‘New Key’. You need to change the name of the key from ‘Custom Property’ to ‘UiAppFonts’ and then add an entry where it says ‘String’ for the file name of your font. In this instance ‘materialicons.ttf’.
Info.plist Settings On iOS
3. Write A Custom Renderer For iOS
Custom renderers are used when you want to override the default behaviour for a particular UI component on a particular platform. In this case we are overriding the default renderer for our IconLabel class to use the font we have just imported.
Add an empty class file to your iOS project and edit like so…
using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
// This informs the compiler that we're using this class to render an IconLabel on this platform
[assembly: ExportRenderer (typeof (CustomFontDemo.IconLabel), typeof (CustomFontDemo.iOS.IconLabelRenderer))]
namespace CustomFontDemo.iOS
{
public class IconLabelRenderer : LabelRenderer
{
public IconLabelRenderer ()
{
}
// sets the font for the platform-specific ui component to be our custom font
protected override void OnElementChanged (ElementChangedEventArgs e)
{
base.OnElementChanged (e);
double? fs = e.NewElement?.FontSize;
// Note we're using the font family name here, NOT the filename
UIFont font = UIFont.FromName ("Material Icons", (int)fs);
Control.Font = font;
}
// Without this strange things happen if you update the text after the label is first displayed
protected override void OnElementPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged (sender, e);
if (e.PropertyName.Equals ("Text"))
{
Label label = sender as Label;
// Note we're using the font family name here, NOT the filename
UIFont font = UIFont.FromName ("Material Icons", (int)label.FontSize);
Control.Font = font;
}
}
}
}
Any custom icon font should come with documentation showing which icon maps to which unicode text character. Usually this is done with HTML-encoded values. For the purposes of this demo I’m going to use the value for the ‘favourites’ icon in Google’s Material Icons font. I can reference this directly in the XAML like so, note I’ve alse increased the font size for the label here too!
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CustomFontDemo" x:Class="CustomFontDemo.CustomFontDemoPage"> <local:IconLabel Text="" VerticalOptions="Center" HorizontalOptions="Center" FontSize="144"/> </ContentPage>
Text = System.Net.WebUtility.HtmlDecode ("");
5. Import Your Custom Font Into Your Android Project
Right-click on the Assets directory in your Android project and select ‘Add Files’. Navigate to the font file you have chosen on your hard drive and add it to the project. Once the file has been added right-click on it and check the ‘Build Action’ is set to ‘AndroidAsset’.
Where To Import The Font File On Android
6. Write A Custom Renderer For Android
Add an empty class file to your Android project and edit like so…
UPDATE: I have discovered that using Typeface.CreateFromAsset in this way is extremely inefficient and can lead to serious performance issues when using a lot of labels etc. I have left the code as it is for the sake of clarity but really you should only initiate your typeface once (I do it in a static class). I would have presumed this type of caching would have been handled at the OS level but apparently not!
using System;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
// This informs the compiler that we're using this class to render an IconLabel on this platform
[assembly: ExportRenderer (typeof (CustomFontDemo.IconLabel), typeof (CustomFontDemo.Droid.IconLabelRenderer))]
namespace CustomFontDemo.Droid
{
public class IconLabelRenderer : LabelRenderer
{
public IconLabelRenderer ()
{
}
// sets the font for the platform-specific ui component to be our custom font
protected override void OnElementChanged (ElementChangedEventArgs e)
{
base.OnElementChanged (e);
// Note we're using the filename here, NOT the font family name
var font = Typeface.CreateFromAsset (Forms.Context.ApplicationContext.Assets, "materialicons.ttf");
Control.Typeface = font;
}
}
}
You can download a .zip file for the project here.
Custom Icon Font Running On Xamarin.Forms iOS
Custom Icon Font Running On Xamarin.Forms Android
The BitBull Blog 