Simple way to use icon fonts in Xamarin Forms projects

Almost all apps use some kind of graphic icons to make the UI more attractive and easy to use. Here I will demonstrate a quick way of adding icon fonts in Xamarin applications.

There are plenty of icon sets available as web fonts for free, e.g. FontAwesome, Material Icons, Icofont. But, as mobile devs, we should always be concerned about the app size. For this example, I will use a handy service to create a custom font that only contains the icons I need: Fontello.
To create a custom font:
  1. Select icons that you’re interested in or upload an SVG;
  2. Write down the icons codes, we’ll need them later;
  3. Set a font name and hit the download button.

OK, now we have everything ready to add these icons to the app. Open your Xamarin Forms project in Visual Studio and let’s start with adding the .ttf file to the native projects.

Android

Add the file to the Assets folder and make sure that the Build Action is AndroidAsset (should be set by default).

iOS

Add the file to the Resources folder, make sure that the Build Action is BundleResource (again, should be set by default).
In iOS projects, we also need to list custom fonts in the Info.plist file. There are two ways to do that: double-click on the Info.plist file, select the Source tab and add a ‘Fonts provided by application‘ record (don’t forget to replace customfont.ttf with your font name):
Or if you prefer to edit the Info.plist in a text editor, just add the following lines before the closing </dict>  tag:
<key>UIAppFonts</key>
<array>
    <string>customfont.ttf</string>
</array>

Xamarin Forms Project

At this point, we have everything ready to use the icons in the app. Let’s add a new item to the ResourceDictionary in the App.xaml to handle platform specific differences:

<OnPlatform x:Key="CustomFont" x:TypeArguments="x:String">
    <On Platform="Android" Value="customfont.ttf#fontello" />
    <On Platform="iOS" Value="customfont" />
</OnPlatform>

And finally the icons. Add a label to a page, set the FontFamily and the Text properties:

<Label Text="&xe803;" x:Name="Heart" FontFamily="{StaticResource CustomFont}" FontSize="30" TextColor="White"/>

Notice that we’re using the codes that we wrote down from the Fontello service here. To make the XAML code a bit cleaner we can move all properties to a style and set only the icon code (Text property) in the label. Or even create separate styles for all frequently used icons:

<Style x:Key="Icons" TargetType="Label">
    <Setter Property="FontFamily" Value="{StaticResource CustomFont}" />
    <Setter Property="FontSize" Value="30" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="WidthRequest" Value="40" />
</Style>
<Style x:Key="LikeIcon" BasedOn="{StaticResource Icons}" TargetType="Label">
    <Setter Property="Text" Value="&#xe801 ;"/>
</Style>
<Label Text="" Style="{StaticResource Icons}" />
<Label Style="{StaticResource LikeIcon}" />

It’s also possible to update the text programmatically from the code-behind or via bindings from the view model. E.g. when you want to show an arrow indicating the sort order:

public string SortIconFullName => _sortBy == "fullname" ? (_sortAsc ? "\uE5C7" : "\uE5C5") : string.Empty;
public string SortIconEmail => _sortBy == "email" ? (_sortAsc ? "\uE5C7" : "\uE5C5") : string.Empty;

And finally a nice bonus — since this is just a label with some text (or any other control with a text), you can easily change the color, size or even add an animation. You can find a sample project here: https://github.com/vecalion/Xamarin.IconFontDemo
Happy coding!

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.