Using Material Design Icon in NativeScript

Integrating icons in Nativescript at first was a little intimidating and confusing, we have a lot of bugs and questions with people struggling to get it right, a lot of plugins have been created for this purpose but have since not been maintained which raised a lot of issues around icons again but thanks to the Nativescript team, especially with this earlier versions you can simply using any icon as a font by creating a font folder at the root of your application and then referencing it in your stylesheet.

I wrote an article about using font-awesome with Nativescript around last year but several questions have been asked about using Angular material Icons with NS and it’s basically the same process. let me demonstrate it here in pictural means.

Step 1 — Download fonts.
- Navigate to the angular material icons repo on GitHub: https://github.com/google/material-design-icons
- Click on font and download the variants of your choices notice I download the regular and the outline fonts below.

Select the font folder

Download the checked variant

Steps 2

Copy the download font into your fonts folder in your nativescript application.

You are good to go the last thing is to reference the fonts you need in your app.css or app.scss. See how I separated the regular from the outline varient.

./app.scss

.m-icon { // or any other class name you prefer

font-family: “Material Icons”, “MaterialIcons-Regular”;

font-weight: 400;

}

.m-icon-outline { // or any other class name you prefer

font-family: “Material Icons”, “MaterialIconsOutlined-Regular”;

font-weight: 400;

}

In my template (.html) I can easily use an icon with the icon code and separate the variant with the class i.e Regular or outline with the class name:

Regular Home Icon
<Label text=”&#xe88a;” class=”m-icon"></Label>

Outline Icon
<Label text=”&#xe88a;” class=”m-icon-outline"></Label>

If you ever wonder how I got the icon code kindly navigate to the material icon page, click on an Icon you will get the code, copy and paste it after the &#xe+code and you will smile when you look at your simulator or emulator :)

Thanks.