Не могу использовать компонент MatIcon

Question

Я недавно обновил свой проект до Angular v6. Я пытаюсь установить Angular Material, следуя этому руководству: Руководство по материалам для угловых

Это модуль моего приложения:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
 declarations: [
   AppComponent,
   PruebaComponent
 ],
 imports: [
   ...
   MatButtonModule, 
   BrowserAnimationsModule,
   MatCheckboxModule
 ],

Это HTML-код тестового компонента:

<h3>Fab Buttons</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

Однако я получаю эту ошибку:

compiler.js:215 Uncaught Error: Template parse errors:
'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

Answer 1

Если вы хотите использовать материал с Angular 6, вы должны полагаться на @angular/schematics, как объяснено в их блоге .

просто запустить

ng add @angular/material

И Angular Material будет установлен, настроен, и вам нечего будет делать.

А чтобы использовать компоненты материала, следуйте ответу @ PardeepJain.

Answer 2

Вам необходимо добавить MatIconModule в app.module.ts для использования в проекте.

Попробуйте это -

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

@NgModule({
  declarations: []
  imports: [MatIconModule,....]
});