Using Bootstrap and Material Font Icons in Xamarin Forms

Font Icons in Xamarin Forms Bootstrap and Material Design

We love everything that makes the process of building beautiful applications easier. Using font Icons in Xamarin Forms apps makes this easier. Having to skip the process of creating and adding manually every icon for our application is just awesome. Font Icons are a great tool which we can leverage for this purpose.

Several months ago, I wrote this blog post about adding Font Awesome Icons in your Xamarin Forms applications. Now, here is a simple blog post about using Bootstrap and Material font icons in your Xamarin Forms apps.

Getting The Font Icons

These steps explains how to get the font icons. For Bootstrap and Material Design.

Here is the source code for this demo app.

Bootstrap

You can get bootstrap glyph icons from github. Here is the link to the file. Make sure you get the file named: “glyphicons-halflings-regular.ttf”. This file will be added later to our platform projects.

Material Design

Material design font icons can be downloaded from this source: here is the link. Click the big download button at the top right corner of the page.

Adding Font Icons in Xamarin Forms

The font icons should be added in the platform specific projects. There is a specific way to add font icons for each platform.

Android

On Android, it is easy to add the font icons to your app. Just add the font icons to your Assets folder in your android platform specific project.

iOS

On iOS, you need to add the font icons to the Resources folder in the iOS project. Then, edit the info.plist file.


  <key>UIAppFonts</key>
  <array>
    <string>glyphicons-halflings-regular.ttf</string>
    <string>materialdesignicons-webfont.ttf</string>
  </array>

Adding Font Icons in Xamarin Forms Projects (iOS, Android)

Accessing The Fonts in Your App

To display these fonts in your app, you can add it as a resource and call the resource as font style for a Label.

Bootstrap

        <OnPlatform x:Key="Bootstrap" x:TypeArguments="x:String">
            <On Platform="iOS" Value="Glyphicons" />
            <On Platform="Android" Value="glyphicons-halflings-regular.ttf#Glyphicons" />
        </OnPlatform>

After defining the Bootstrap resource, we use it as font style for any label which should contain bootstrap icons.


            <Style TargetType="{x:Type Label}" x:Key="BotstrapIcons">
                <Setter Property="FontFamily" Value="{StaticResource Bootstrap}"/>
                <Setter Property="FontSize" Value="100"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="TextColor" Value="LightSkyBlue"/>
            </Style>

Material Design

        <OnPlatform x:Key="Material" x:TypeArguments="x:String">
            <On Platform="iOS" Value="Material Design Icons" />
            <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
        </OnPlatform>

Above we defined a Material Design font style resource. This will be designed a the Font style of every label which serves as icon in your app.

<Style TargetType="{x:Type Label}" x:Key="MaterialIcons">
                <Setter Property="FontFamily" Value="{StaticResource Material}"/>
                <Setter Property="FontSize" Value="100"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="TextColor" Value="LightSkyBlue"/>
                <Setter Property="FontSize" Value="Large"/>
            </Style>

Using the Font Icons in your App

To display the icons in your app, you need to get the code for each icon. Either Bootstrap or Material design.

Bootstrap

To get bootstrap icons code, you can follow this link. Select the icon you want to add and get its “Unicode HTML Entity”. This code will be added to your XAML preceding the “&#x” characters and ending with “;” character. As follows:

        <Label Style="{StaticResource BotstrapIcons}"                TextColor="Red" Text="*" FontSize="100"/>         <Label Style="{StaticResource BotstrapIcons}"                Grid.Column="0" Grid.Row="1"                Text="" FontSize="100"/>         <Label Style="{StaticResource BotstrapIcons}"                Grid.Column="0" Grid.Row="2"                Text="" FontSize="100"/>         <Label Style="{StaticResource BotstrapIcons}"                Grid.Column="1" Grid.Row="0"                Text="" TextColor="LightGray" FontSize="100"/>

Material Design

To get Material design icon codes, you can navigate to this tool . Browse and upload your font icons file. It will generate the code for each font as used in C#. To use the code generated in XAML, replace the ‘\u’ character with ‘&#x’ and at the end add a ‘;’.

        <Label Style="{StaticResource MaterialIcons}"                TextColor="Red" Text="" FontSize="100"/>         <Label Style="{StaticResource MaterialIcons}"                Grid.Column="0" Grid.Row="1"                Text="" FontSize="100"/>         <Label Style="{StaticResource MaterialIcons}"                Grid.Column="0" Grid.Row="2"                Text="" FontSize="100"/>         <Label Style="{StaticResource MaterialIcons}"                Grid.Column="1" Grid.Row="0"                Text="" TextColor="Yellow" FontSize="100"/>

Font Icons in Xamarin Forms Material Design
Font Icons in Xamarin Forms Bootstrap

Here is the source code for this demo app.

Conclusion

Leveraging font icons can help us go faster in the process of app development. Hopefully, this post will permit you to leverage these tools easily. You can find a little more about Material Design icons in Xamarin.Forms via this blog post by James Montemagno.

If this post was useful to you, please share it and follow me on Twitter, Github or like my Facebook page.Follow me on social media and stay updated