How can i use mdi icons in angular 6

问题

I am trying to configure mdi icons with @angular/material in my mini-project. I have tried several tutorials but with no avail.

When registering the icon set following the tutorial (as shown below), I get some errors...

constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { 
  matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
}

Here is my code...

app.module.ts

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 { }

styles.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import url(https://fonts.googleapis.com/icon?family=Roboto);

$BasicColor: #76b3c8;
body {
  #basic {
    background-color: $BasicColor;
  }
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PruebaAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<mat-toolbar id="basic">
  <span>Home</span>
</mat-toolbar>

<router-outlet></router-outlet>

angular.json

...
"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" }
      ],
    }
  },
}
...

回答1:

Working example https://stackblitz.com/edit/angular-material-mdi

📦 Install NPM package

Use the following command to install npm package for @mdi/angular-material

npm install @mdi/angular-material --save

📁 Include `mdi.svg` to the list of compiled assets

Add node_modules/@mdi/angular-material/mdi.svg to the list of assets in your angular.json file using the glob syntax

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

Validate that mdi.svg is correctly copied to assets folder

To validate if mdi.svg file is correctly copied to the assets folder run ng build and look into the generated dist/assets folder to see if the mdi.svg is present. If not, you might have to adjust the glob input path as it is relative to the workspace root. See project assets documentation for details on how include assets via angular.json file.

🎯 Register SVG icon set to @angular/material icon registry

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatIconRegistry, MatIconModule } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatIconModule, // you have to import MatIconModule into your app
  ]
})
export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
  }
}

🔧 Usage

You will be able to use mat-icon component specifying the desired icon with svgIcon property

<!-- Icon by itself -->
<mat-icon svgIcon="android"></mat-icon>

<!-- Icon button -->
<button mat-icon-button>
  <mat-icon svgIcon="android"></mat-icon>
</button>

<!-- You can also combine an icon and text together -->
<button mat-button>
  <mat-icon svgIcon="code-tags"></mat-icon>
  <span>View source</span>
</button>

💡 CSS adjustments for @angular/material

Note: As of 9 Jan 2020, you no longer have to specify the manual CSS adjustments shown below.

Also, they say to add this to your global CSS file styles.css to solve some alignment issues with @angular/material

button.mat-menu-item {
  line-height: 24px !important;
}

a.mat-menu-item > mat-icon {
  margin-bottom: 14px;
}

.mat-icon svg {
  height: 24px;
  width: 24px;
}

❓ Still having errors

As a clue, if you are still having an error at runtime because the application is not able to fetch the mdi.svg file although it is present in the dist/assets folder when using ng build it probably means that something is blocking/intercepting the HTTP request.

angular-in-memory-api

For example, when using angular-in-memory-api you need you to set property passThruUnknownUrl: true when importing HttpClientInMemoryWebApiModule (see releated issue) as this allows the URL to the icon-set to pass without interception.

Server-Side-Rendering

For SSR you might have to specify the full URL when registering the icon set (see related issue) in order to mdi.svg file to be fetched correctly.

📘 Official @mdi documentation

You can refer to @mdi official documentation if there is anything.

回答2:

The most easiest way to use material icons in angular is mat-icon component

<mat-icon>home</mat-icon>

https://material.angular.io/components/icon/overview

来源：https://stackoverflow.com/questions/55308811/how-can-i-use-mdi-icons-in-angular-6

标签

angular

icons

angular6