title: How can i use mdi icons in angular 6
body: <p>I am trying to configure <a href="https://materialdesignicons.com/" rel="nofollow noreferrer">mdi</a> icons with <a href="https://material.angular.io/" rel="nofollow noreferrer">@angular/material</a> in my mini-project. I have tried several tutorials but with no avail.</p>
  
  <p>When registering the icon set following the tutorial (as shown below), I get some errors...</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { 
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
  }
  </code></pre>
  
  <p>Here is my code...</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { MatIconRegistry, MatToolbarModule, MatIconModule } from '@angular/material';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpModule,
    MatToolbarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>styles.scss</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  @import url(https://fonts.googleapis.com/icon?family=Roboto);
  
  $BasicColor: #76b3c8;
  body {
    #basic {
      background-color: $BasicColor;
    }
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;PruebaAngular&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar id="basic"&gt;
    &lt;span&gt;Home&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>angular.json</strong></p>
  
  <pre><code>...
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "assets": [
          "src/favicon.ico",
          "src/assets",
          { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
          { "glob": "favicon.ico", "input": "./", "output": "./" },
          { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
        ],
      }
    },
  }
  ...
  </code></pre>