Quickly Use Material Font Icons In Nativescript Angular Apps


Nativescript natively supports font icons. That means you can use any font-icon library like fontawesome, material-design-icons, icomoon or your own custom font icon.

To use font icons in nativescript angular project, there is a great plugin nativescript-ng2-fonticon. This plugin requires a font file and a CSS file containing mapping of className and unicode of the icon.

Unfortunately material-design-icons does not provide ready to use CSS file which contains mapping of className and unicode of the icon. To solve this issue I have created a small plugin nativescript-material-icons, which will add MaterialIcons font and a ready to use CSS file to your project.

I have created a demo app as a companion to this tutorial.

With this much introduction, let me show step-by-step how to quickly use material-design-icons in your project.

Step 1

Install nativescript-material-icons and nativescript-ng2-fonticon npm packages.

npm install nativescript-material-icons nativescript-ng2-fonticon --save

Step 2

In your root module, configure and import TNSFontIconModule from nativescript-ng2-fonticon as shown below:

app.module.ts

import { TNSFontIconModule } from 'nativescript-ng2-fonticon';

@NgModule({
  ...
  imports: [
    ...
    TNSFontIconModule.forRoot({
      'mdi': 'material-design-icons.css'
    })
  ]
})

Here, mdi is the class prefix for material design icons and material-design-icons.css is the path of the css file from app/ directory.

Step 3

Inject TNSFontIconService service in your root component.

app.component.ts

import { TNSFontIconService } from 'nativescript-ng2-fonticon';

export class AppComponent {
  constructor(private fonticon: TNSFontIconService) {}
}

Step 4

Create .mdi class in your CSS file with below content:

app.css

.mdi {
  font-family: "Material Icons", "MaterialIcons-Regular";
}

Here, we are setting font-family to Material Icons. Note that, iOS requires font name to be specified as font-family so “Material Icons” is for iOS and Android requires font file name to be specified as font-family. So “MaterialIcons-Regular” is for Android.

Step 5

Now, In your component template you can use any valid material design icon by prefixing its name with mdi- as shown below:

app.component.html

<Label class="mdi" [text]="'mdi-favorite' | fonticon"></Label>

Here,class="mdi" sets font-family for this Label to Material Icons and fonticon is the pipe from TNSFontIconModule, which will fetch unicode from the name of the icon and sets it as text of the label.

Preview

Android

material-icons-android-preview

iOS

material-icons-ios-preview

  • Jacoby Joukema

    Does this only work with Angular? Is there a way to adapt this to work with normal Typescript?

    • Shripal Soni

      This tutorial is for Angular. But if you want to use material icons in Nativescript + Typescript apps, you can do it. For that you need to install nativescript-fonticon plugin instead of nativescript-ng2-fonticon. The steps to follow will be 1. Install nativescript-fonticon and nativescript-material-icons plugins. 2. Follow the instructions mentioned at https://github.com/NathanWalker/nativescript-fonticon#usage. Hope this will help you.

      • Jacoby Joukema

        Thanks that’s what I’m looking for! Great job on this btw.

  • César Augusto Ribeiro

    There’s any problem with icon names with underline? Like camera_enhance and delete_forever? Tried to use those two, no success.

    • César Augusto Ribeiro

      Oh, figured it out. Need to replace for “-“. So, camera-enhance, delete-forever.

  • ivan coene

    Hi,
    Is it possible to use this icon on a NavigationButton?
    I tried something like this:

    But it didn’t work…

Menu