Как добавить иконки материалов

Question

Я пытаюсь использовать иконки материалов Outlined в моем приложении. Я не могу импортировать их должным образом. Я могу использовать только норамальные иконки. Я хочу использовать выделенные значки, например , в этом примере .

. В этом примере я могу использовать значок done_outline. Как они импортировали все иконки?

В моем приложении я установил npm install material-design-icons

, и я импортировал MatIconModule в свой app.module.ts, но я все еще не могу использовать какие-либо контуры иконки.

Answer 1

У вас есть два решения.

1) Первое решение.

1. Ссылка элемента шрифта в вашем индексном файле

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

Или набросок версии :

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

Вы можете использовать его в своем шаблоне

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

2) Решение с пакетом материалов

1. Вам необходимо установить пакет материалов

npm установка @ угловая / материал

Ссылка в app.module

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

используйте его сейчас

<mat-icon>face</mat-icon>

Демо:

https://stackblitz.com/edit/angular-psj1hy