Ответ 1

Просто следуйте этим шагам:

1. Загрузите mdi.svg здесь, в разделе Angular Material, и поместите его в папку assets, которая должна находиться в (из корня вашего проекта) /src/assets:

2. В своем модуле приложения (он же app.module.ts) добавьте следующие строки:

   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'));
     }
   }
   

3. Обязательно .angular-cli.json папку assets в .angular-cli.json в assets (хотя по умолчанию она будет там):

   {
     "apps": [
       {
         ...
         "assets": [
           "assets"
         ]
       }
     ]
   }
   

4. Наконец, используйте его через компонент MatIcon со входом svgIcon:

   <mat-icon svgIcon="open-in-new"></mat-icon>
   

Обновить

Я изменил инструкции, чтобы он работал для более поздних версий.

Ответ 2

Для всех, кто использует scss:

npm install material-design-icons

в src/styles.scss

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

и в HTML, как описано здесь

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

Приложение: мой ответ немного старше. Это все еще работает хорошо, но больше не является современным. Ответ @A. Морель здесь немного более современно.

Ответ 3

Как и в ответе @creep3007, вы можете указать таблицу стилей в .angular-cli.json:

• Установите пакет npm

  npm install material-design-icons --save
  

• Добавьте значки материалов в ваш .angular-cli.json

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

• Используйте его

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

Ответ 4

Установить пакет npm

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

Добавьте иконки материалов css в ваш .angular-cli.json (не забудьте перезапустить "ng serve")

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

или в вашем src/styles.scss

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

Импортируйте модуль в ваш app.module.ts

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

...

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

И используйте это так:

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

Выберите имя в значках дизайна материалов => https://material.io/tools/icons/?style=baseline.

Ответ 5

Обратите внимание, что этот ответ применим к значкам дизайна материалов от Templarian, а НЕ - к тем же названиям Google. Я не понимаю, почему эти инструкции не содержатся в Readme, но здесь вы идете.

Сначала установите пакет:

npm install @mdi/font --save

Затем необходимо добавить таблицу стилей в файл styles.scss. Я добавил следующее в конец моего файла:

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

Обратите внимание, что $mdi-font-path необходим для переопределения значения по умолчанию, установленного в @mdi/font/scss/_variables.scss что заставляет компилятор webpack жаловаться. Если вы забудете сделать это, вы получите ряд ошибок, а именно:

ОШИБКА в. /node_modules/css-loader!./node_modules/postcss-loader/lib.ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Модуль не найден: Ошибка: невозможно разрешить '../fonts/materialdesignicons-webfont.eot' в '/home/myRepo/myApp'

Изменить: я не уверен, что это необходимо (возможно, это в некоторых случаях), но я также обновил элемент styles .angular-cli.json:

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

Другой альтернативой вышесказанному, который привел к тому, что значки работали с очень небольшим усилием, было напрямую импортировать CSS. В файле машинописного styleUrls я заменил элемент styleUrls (чтобы избежать странной ошибки с кармой):

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

Ответ 6

С Bootstrap 4 & Angular это работает:

1) Запуск:

npm install material-design-icons --save

2) Добавить в styles.css или styles.scss

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

3) Перейдите в: ..\node_modules\material-design-icons\iconfont\material-icons.css и убедитесь, что раздел в точности подобен этому ('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) Использовать значок в html:

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

Ответ 7

Основываясь на ответе @theMayer, есть моя версия, чтобы она работала для пакета @mdi/font.

1- npm install @mdi/font --save

2- В angular.json разделе architect/buid/options/styles добавьте "node_modules/@mdi/font/css/materialdesignicons.min.css"

3- В src\app\app.module.ts добавьте import { MatIconModule } from '@angular/material/icon'; и добавьте MatIconModule в разделе imports

4- В src\styles.scss добавьте:

$mdi-font-path: "[email protected]/font/fonts";
@import "[email protected]/font/scss/materialdesignicons.scss";

5- Добавьте значок в ваш HTML, используя mat-icon, например:

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