Custom Fonts & Material Design Icons in .NET MAUI

In this article, you’ll learn how to use fonts such as Material Design Icons, Font Awesome or your custom one as app icons instead of images in your .NET MAUI application.

Let’s get started.

Material Design Icons

Let’s start with downloading the Material Design Icons.

Once downloaded, unzip the file and you will find the materialdesignicons-webfont.ttf file in the fonts folder.

Next, you’ll need to generate a class containing all the glyphs so you can reference your icons from C#. Go to Icon Font to #Code, then upload the font file.

Click Copy to clipboard because you need this later.

Setup

Switch over to your Visual Studio. Create a new folder called Helpers and inside that folder, create a new class called MaterialDesignIconFonts, then paste the content you just copied earlier from the Icon Font to #Code.

Now, you have the ability to use the font name instead of the Unicode characters.

Next, go to Fonts under the Resources folder, then add the materialdesignicons-webfont.ttf file. Also, make sure to set the Build Action to MauiFont.

Then you need to register the font in your MauiProgram.cs, add this line into the ConfigureFonts:

fonts.AddFont(filename: "materialdesignicons-webfont.ttf", alias: "MaterialDesignIcons");

Usage

In your MainPage.xaml, bring in the Helpers XML namespace:

xmlns:helpers="clr-namespace:MauiFontIconsDemo.Helpers"

Add a new Label then set the FontFamily to MaterialDesignIcons. Then reference an icon using x:Static:

<Label 
    FontFamily="MaterialDesignIcons" 
    Text="{x:Static helpers:MaterialDesignIconsFonts.RocketLaunch}"
    FontSize="50"
    HorizontalOptions="Center">
</Label>

You can also use fonts as button icons using FontImageSource:

<Button
   BackgroundColor="#1d9bf0" 
   HorizontalOptions="Center"
   Text="follow">
   <Button.ImageSource>
       <FontImageSource 
         FontFamily="MaterialDesignIcons"
         Glyph="{x:Static helpers:MaterialDesignIconsFonts.Twitter}"
         Size="25" />
   </Button.ImageSource>
</Button>

Custom Fonts

You can use your preferred icons by creating a custom font file. You’ll need to import icons as SVG and then generate them as a font file.

Go to IcoMoon App then click Import Icons.

Make a selection the click Generate Font.

Name your icons then click Download.

IMPORTANT: Unicode characters start at e900, anything comes before are private use areas.

Once downloaded, unzip the file and you will find the icomoon.ttf file in the fonts folder.

Go to Icon Font to #Code then upload the font file. Also, make sure to start selection from \ue900.

Click Copy to clipboard.

Setup

Switch back to your Visual Studio. Create a new class called CustomFontIcons under the Helpers folder, then paste the content you just copied from the Icon Font to #Code. You can also rename your icons to something more meaningful:

Next, go to Fonts under Resources folder then add the icomoon.ttf file. Also, make sure to set the Build Action to MauiFont.

Lastly, register the font in your MauiProgram.cs, add this line into the ConfigureFonts:

fonts.AddFont("icomoon.ttf", "CustomFontIcons");

Usage

In your MainPage.xaml, add a new Label then set the FontFamily to CustomFontIcons.

<Label
    FontFamily="CustomFontIcons"
    FontSize="50"
    HorizontalOptions="Center"
    Text="{x:Static helpers:CustomFontIcons.CodeSolid}" />

Well, that’s it on how you can use fonts as icons in your .NET MAUI application! Go ahead and use those custom fonts! Read through the docs for more information.

Follow me on Twitter!