NodeJS/Angular Plugin <mat-icon-import>

NodeJS/Angular Plugin <mat-icon-import>

Published on: 9/25/2018


npm i mat-icon-import #or yarn add mat-icon-import
The repository is a childrepo of ng-libraries on GitHub.


At first download the icons you need from here in SVG 24px format (default). The icon names are of type baseline-[key]-24px.svg. You will have to use the key when importing this lib.
Import the IconImportModule in your application module and call the forRoot() function with two parameters. At first the array of icon keys, e.g. (account_circle, add or whatever you want). The secont parameter is the path where you store the icons in your assets folder.
import { IconImportModule } from 'mat-icon-import'; @NgModule({ imports: [ IconsModule.forRoot(['account_circle'], './assets/mat-icons') ] }) export class AppModule {}
Listing: Importing in app module, provide array with icon names
Register the icons where you need them. E.g. in the AppComponent to make it available in the complete application.
import { IconImportService } from 'mat-icon-import'; @Component({ ... }) export class AppComponent { constructor (private iconService: IconImportService) { this.iconService.register(); } }
Listing: Registering the icons in the MatIcon registry
Use the registered icons with
<mat-icon svgIcon="account_circle"></mat-icon>
Don't forget to import the MatIconModule from @angular/material.