Ng Material Icons

A library for using Material Icons in Angular.

Links

• Documentation
• Icon list on Material Design
• Code point list

Setup

1. Install in your project using npm:

npm install ng-mat-icons

2. Import the NgMatIconsModule in your module. The recommended way is to include it in a SharedModule, which also exports it. Then import the SharedModule in other modules of your application. Check the full documentation for additional information.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgMatIconsModule } from 'ng-mat-icons';

@NgModule({
  imports: [CommonModule, NgMatIconsModule],
  exports: [NgMatIconsModule],
})
export class SharedModule {}

3. Now you can begin to use Material Icons in your components.

<!-- Using icon name -->
<nmi-icon>face</nmi-icon>

<!-- Using code point -->
<nmi-icon>&#xe87c;</nmi-icon>

<!-- Adding aria-label -->
<nmi-icon label="Person">face</nmi-icon>

<!-- Setting the size -->
<nmi-icon size="sm">home</nmi-icon>
<nmi-icon size="md">home</nmi-icon>
<nmi-icon size="lg">home</nmi-icon>
<nmi-icon size="xl">home</nmi-icon>

<!-- Setting the color -->
<nmi-icon color="dark">menu</nmi-icon>
<nmi-icon color="dark" [inactive]="true">menu</nmi-icon>
<nmi-icon color="light">menu</nmi-icon>
<nmi-icon color="light" [inactive]="true">menu</nmi-icon>

Check the full documentation for details. Additional information on icons and names and icon names with code points.

Contribution

Build

Run ng build to build the project.

Run ng build:lib to build the library. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm run test:lib to execute the unit tests for the library.