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 atmaterial design google repo, so go to material-design-icons > font > MaterialIcons-Regular.ttf.
Using font icon
Step 1. Put archievetff on folderFonts in your Xamarin Shared Project.
Don't forget to set build action as Embedded resource.
Step 2. AddExportFont in yourApp.xaml.cs as below:
...[assembly:ExportFont("MaterialIconsRegular.ttf",Alias="Material")]namespaceMaterialApp{publicpartialclassApp:Application{publicApp(){InitializeComponent();MainPage=newMainPage();}...
Aliasis optional.
Step 3. Use a materialize font in any page you need.
<StackLayout><LabelText=""FontSize="50"TextColor="Orange"FontFamily="Material"HorizontalOptions="Center"/></StackLayout>You will need the hexadecimal code, You can get it atMaterialIcons-Regular.codepoints.
I like to search icons onhttps://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. 😄
Top comments(3)
- LocationAustin, Texas
- EducationInstituto Tecnológico de Ciudad Guzman
- WorkSoftware Engineer at simplea.com
- Joined
Very nice article. However, I could not find a way to use MaterialIcons rounded or outlined versions.
I'm wondering if you have implemented those versions.
Thanks in advance
- LocationSao Paulo, brazil
- WorkProgrammer at Hunes Tecnologia
- Joined
Thanks!
The rounded and outlined icons was added some months ago... Try get it here:github.com/google/material-design-...
Tell me if you got it!
For further actions, you may consider blocking this person and/orreporting abuse
