问题

I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started)

How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve?

NOTE: I already Included the google material icons which are different!

回答1:

Simply follow these steps:

Download mdi.svg from here under the Angular Material section and place it in your assets folder, which should be located at (from your project's root) /src/assets:

In your app's module (aka app.module.ts), add the following lines:

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

Make sure to include assets folder under .angular-cli.json in assets (Although by default, it will be there):
```
{
  "apps": [
    {
      ...
      "assets": [
        "assets"
      ]
    }
  ]
}
```
Finally, use it via the MatIcon component with the svgIcon input:
```
<mat-icon svgIcon="open-in-new"></mat-icon>
```

Update

I've changed the instructions so that it will work for later versions.

回答2:

For all who use scss:

npm install material-design-icons

in src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

and in HTML as described here

<i class="material-icons">visibility</i>

Addendum: My answer's a little bit older. This still works fine but is no longer state of the art. The answer of @A. Morel here is a bit more contemporary.

回答3:

Similar to the answer by @creep3007, you can specify the stylesheet in your .angular-cli.json:

Install npm package

npm install material-design-icons --save

Add material icons to your .angular-cli.json

{
  "apps": [
    {
      "styles": [
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

Use it

<i class="material-icons">visibility</i>

回答4:

Install npm package

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

Add material icons css to your .angular-cli.json (don't forget to restart "ng serve")

{
  "apps": [
    {
      "styles": [
        "node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

or in your src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

Import module in your app.module.ts

import { MatIconModule } from '@angular/material/icon';

...

@NgModule({
  imports: [
      ...,
      MatIconModule
  ],

And use it like that:

<mat-icon>location_off</mat-icon>

Pick the name from Material Design Icons => https://material.io/tools/icons/?style=baseline

回答5:

Note this answer applies to the Material Design Icons by Templarian and NOT the icons of the same name by Google. I don't understand why these instructions aren't in the Readme, but here you go.

First, install the package:

npm install @mdi/font --save

Then, it is necessary to add the stylesheet to your styles.scss file. I added the following to the end of my file:

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

Note the $mdi-font-path is necessary to override a default set within the @mdi/font/scss/_variables.scss which causes the webpack compiler to complain. If you forget to do this, you will get a series of errors, as follows:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Module not found: Error: Can't resolve '../fonts/materialdesignicons-webfont.eot' in '/home/myRepo/myApp'

Edit: I'm not sure if this is necessary (it probably is in some cases), but I also updated the .angular-cli.json file styles element:

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

Another alternative to the above, which resulted in the icons working with very little effort, was to import the CSS directly. In the typescript file, I replaced the styleUrls element (to avoid a strange bug with Karma):

 // styleUrls: ['./graphics-control.component.css'],
  styles: [require('./my.component.css'),
           require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]

回答6:

With Bootstrap 4 & Angular this works:

1) Run:

npm install material-design-icons --save

2) Add to styles.css or styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

3) Go to: ..\node_modules\material-design-icons\iconfont\material-icons.css and make sure the section is exactly like this ('MaterialIcons-Regular.woff2')...:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.woff2') format('woff2'),
       url('MaterialIcons-Regular.woff') format('woff'),
       url('MaterialIcons-Regular.ttf') format('truetype');
}

4) Use icon in html:

<i class="material-icons">visibility</i>

回答7:

Base on @theMayer answer, there is my version to make it work for package @mdi/font.

1- npm install @mdi/font --save

2- In angular.json, under architect/buid/options/styles, add "node_modules/@mdi/font/css/materialdesignicons.min.css"

3- In src\app\app.module.ts add import { MatIconModule } from '@angular/material/icon'; and add MatIconModule in imports section

4- In src\styles.scss add:

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

5- Add the icon in your html using mat-icon, for example:

<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>

来源：https://stackoverflow.com/questions/44677960/how-to-use-material-design-icons-in-angular-4

标签

angular

angular-material2

How to use Material Design Icons In Angular 4?

问题