Импорт MaterialIcon в Angular - PullRequest
Новая
       4

Импорт MaterialIcon в Angular

0 голосов
/ 02 февраля 2020

Я использовал приведенный ниже оператор импорта в моем angular проекте. Но это не работает: 

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

Ответы [ 2 ]

1 голос
/ 03 мая 2020

В дополнение к импорту MatIconModule в модуль, где объявлен ваш компонент, в котором вы хотите использовать значки: 

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

@NgModule({
  imports: [
    MatIconModule,
  ]
})
export class ExampleModule { }

Вы должны включить шрифт Material Icons в свой index.html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- include Material Icons font -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Вы сможете использовать значки, подобные этим: 

<mat-icon>favorite</mat-icon>

Полный список доступных значков можно найти здесь: https://material.io/resources/icons/

⚡ Рабочий пример: https://stackblitz.com/edit/stackoverflow-60028622

1 голос
/ 03 мая 2020

Убедитесь, что вы помещаете эту ссылку в файл модуля, например app.module.ts. Он не go в вашем component файле. 

/* app.module.ts | Angular 9.x */
import { NgModule, ModuleWithProviders } from '@angular/core';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatIconModule
  ],
  exports: [
    ...
    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Примечание: вы также можете поместить это в другой файл модуля, если вы организовываете свои модули по-другому; тем не менее, я показал это в модуле root здесь, так что он будет доступен глобально, в этом примере.

Убедитесь, что вы также загрузили шрифт. Добавить его в раздел HEAD вашего файла index.html проще всего. http://google.github.io/material-design-icons/#icon -font-for-the-web (метод 1) 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Затем вы будете использовать это в своем компоненте HTML как обычно: 

<mat-icon>edit</mat-icon>

Подробнее: https://material.angular.io/components/icon

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...