Material font icons on Xamarin Forms
Peedroca
Posted on November 4, 2020
Hello devs 🖖, recently I'm searching how to use Materialize icons in my mobile app maked with Xamarin.Forms 4.8, but I could't find a great step by step. Therefore I will try to do it today.
Font Source
You need to download the TFF font at material design google repo, so go to material-design-icons > font > MaterialIcons-Regular.ttf.
Using font icon
Step 1. Put archieve tff
on folder Fonts
in your Xamarin Shared Project.
Don't forget to set build action as Embedded resource.
Step 2. Add ExportFont
in your App.xaml.cs
as below:
...
[assembly: ExportFont("MaterialIconsRegular.ttf", Alias = "Material")]
namespace MaterialApp
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new MainPage();
}
...
Alias
is optional.
Step 3. Use a materialize font in any page you need.
<StackLayout>
<Label Text="" FontSize="50" TextColor="Orange"
FontFamily="Material" HorizontalOptions="Center" />
</StackLayout>
You will need the hexadecimal code, You can get it at MaterialIcons-Regular.codepoints.
I like to search icons on https://material.io/resources/icons/?style=baseline and get theirs names, so I find the hexadecimal code at MaterialIcons-Regular.codepoints. (you can find it in google repo.)
That's all, folks. 😄
Posted on November 4, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.