【问题标题】：Template parse errors: 'mat-icon' is not a known element模板解析错误：“mat-icon”不是已知元素
【发布时间】：2018-10-15 20:25:27
【问题描述】：

我正在使用 Angular CLI 和 Angular Material v.5.2.5 并尝试使用

垫图标按钮

但是控制台产生了这样的错误：

未捕获的错误：模板解析错误：'mat-icon' 不是已知的元素...

如果我使用

垫升按钮

一切正常不知道怎么解决

index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

main.ts

 import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatButtonModule } from '@angular/material/button';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您的导入中缺少 MatIconModule。

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

【讨论】：

95% 的材料相关问题通过导入正确的模块得到解决。
幸运的是，还有其他答案指定导出 MatIconModule 的包，谢谢@freedev！
好吧，就我而言，问题是我忘记导入使用 mat-icon 的组件和其他东西
这没有帮助。更新到 Angular 12 后出现错误。
@BluE 同样的事情发生在我身上。我从角度 8 到 12。问题最终是该错误来自的组件不在声明中

【解决方案2】：

我正在使用 Angular 6。我创建了一个名为 material.module.ts 的不同文件，其中保存了所有 mat Module 依赖项。您可以在 app.module.ts 文件中调用这个 material.module.ts 文件。它将起作用。当我将“MatIconModule”添加到我的代码中时，它对我有用。

这是我的代码。

material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {MatButtonModule,MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule} from '@angular/material';


@NgModule({
  imports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule,MatIconModule],
  exports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule]
})


export class MaterialModule{}

和 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

为什么我们需要在 material.ts 中同时导入和导入

【解决方案3】：

在 Angular 9 或更高版本中，您应该

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

然后

imports: [
    // other imports...
    MatIconModule, // <-- here
],

【讨论】：

我正在做正确的导入、导出和角度 9。但是，它仍然抛出同样的错误。有什么解决办法吗？
@meDeepakJain 您是否尝试删除 node_modules 并重新安装所有依赖项？
@meDeepakJain 在进行延迟加载时，我相信我们还需要在我们延迟加载的每个子模块中导入该模块。即：在home.module.ts 内部，我们还应该import { MaterialModule } from '../app.material.module';
@freedev 遗憾的是，删除 node_modules 在这里也没有帮助。

【解决方案4】：

import {MatIconModule} from '@angular/material';// this must add to app module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatButtonModule,
    MatCheckboxModule,
    MatIconModule // this must add to app module.ts
  ],

【讨论】：

【解决方案5】：

如果您设置了模块并正确导入仍然无法正常工作，您可以尝试关闭服务（Ctrl+C）并再次启动服务器。

【讨论】：

【解决方案6】：

您的app.module.ts 或相应的.module.ts 文件也可能发生无法编译。如果有错误，它只会抛出此错误消息，而不是告诉模块本身存在错误。查看相关文件以了解有关导入或代码的任何问题。

【讨论】：

【解决方案7】：

运行：

ng add @angular/material

你会没事的。

【讨论】：