Getting Started with Angular

We're still in the process of writing a first-party library. Until then, a component could be as simple as below.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'icon',
  template: `
    <svg version="1.1" viewBox="0 0 24 24" style="display:inline-block;width:1.5rem">
        <path [attr.d]="data" d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" />
    </svg>
  `
})
export class IconComponent {
  @Input('path') data: string = 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z';
}

import { Component } from '@angular/core';
import { mdiAccount } from '@mdi/js';

@Component({
  selector: 'app',
  template: `
  <div>
    <icon path="mdiAccount"></icon>
  </div>
  `
})
export class AppComponent  {
  mdiAccount: string = mdiAccount;
}

Tested versioned releases can be used through NPM documented here.

npm install @mdi/angular-material

Or if you want the latest WIP straight from the database it can be downloaded via the button below. Note: this includes WIP icons that could change, so we highly recommend using the versioned NPM package above.

Angular 2+ Download for Angular Material 'mdi.svg'

This bundle is usable with Angular Material and to facilitate usage, it's recommended to use copy-webpack-plugin.

Add the following plugin configuration in the Webpack configuration:

new CopyWebpackPlugin([
  { from: 'node_modules/@mdi/angular-material/mdi.svg',
    to: 'assets/mdi.svg'
  }
]);

Or if you're using the Angular CLI, make sure to include mdi.svg in your assets folder under the Angular workspace configuration file in the assets array, located in the build configuration for your project:

{
  // ...
  "architect": {
    "build": {
      "options": {
        "assets": [
          { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
          { "glob": "favicon.ico", "input": "./", "output": "./" },
          { "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
        ]
      }
    }
  }
  // ...
}

Note that the input directory is dependent on the workspace root which can be found by looking at your desired project's root property. (For more information, visit the Angular documentation on project configuration options.)

Additionally, see the Angular documentation on assets configuration for more information.

The mdi.svg contains all the icons provided on the site. It can be used inline with MatIconRegistry.

1. In your app's main module (typically app.module.ts), import MatIconModule from @angular/material/icon and HttpClientModule from @angular/common/http (HttpClientModule is needed for the icon set to be loaded correctly):

   import { NgModule } from '@angular/core';
   import { HttpClientModule } from '@angular/common/http';
   import { MatIconModule } from '@angular/material/icon';
   
   @NgModule({
     imports: [
       // ...
       HttpClientModule,
       MatIconModule
     ]
   })
   export class AppModule {}

2. Register the icons with MatIconRegistry#addSvgIconSet, passing in the necessary resource URL to be added:

   import { MatIconRegistry } from '@angular/material/icon';
   import { DomSanitizer } from '@angular/platform-browser';
   
   // ...
   export class AppModule {
     constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
       iconRegistry.addSvgIconSet(
         domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
       );
     }
   }

Tha final main module should look like this:

import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // Required by the Angular Material icon module
    HttpClientModule,
    // ...
    MatIconModule
  ]
})
export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
    matIconRegistry.addSvgIconSet(
      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
    );
  }
}

The icons can be used with <mat-icon>'s svgIcon attribute as shown below:

<mat-icon svgIcon="<name of icon>"></mat-icon>

For more information about SVG icons, check out the documentation.

---

StackBlitz demo