Angular CLI+Angular Material v5.2.5中mat-icon未识别错误求助

这问题我遇过好多次啦——你能正常用mat-raised-button却在mat-icon-button上栽跟头，核心原因很明确：mat-icon-button依赖的MatIconModule没被正确导入到你的模块里，而mat-raised-button属于MatButtonModule，你已经导入过所以没问题。

下面是具体的修复步骤：

1. 打开你用到mat-icon-button的组件所属的模块文件（比如app.module.ts，或者对应的功能模块文件）
2. 先在文件顶部导入MatIconModule（如果MatButtonModule还没导入也一起加上，不过你能用mat-raised-button应该已经有了）：

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

3. 在模块的imports数组里添加这两个模块：

@NgModule({
  imports: [
    // 其他已导入的模块...
    MatButtonModule,
    MatIconModule
  ],
  // 其他模块配置（declarations、providers等）...
})
export class YourModuleName { }

4. 最后别忘了在index.html的<head>标签里引入Material Icons字体（没加的话图标只会显示空白）：

插入这行代码：

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

完成这些后，重启你的Angular开发服务（ng serve），就能正常使用mat-icon-button了，比如这样写：

<button mat-icon-button>
  <mat-icon>add</mat-icon>
</button>

内容的提问来源于stack exchange，提问作者Vladyslav Plakhuta