如何修复Angular中'mat-icon' is not a known element错误？

1. 先修复material.module.ts的显性编译错误 #

你当前的material.module.ts存在未导入就使用的代码，会直接导致整个模块编译失败，所有导出的Material组件都无法被识别：代码里直接用了MAT_MOMENT_DATE_ADAPTER_OPTIONS注入令牌，但没有写对应的导入语句。
如果暂时用不上日期适配器功能，直接把@NgModule里providers数组的整段相关配置删掉即可；如果需要保留这个配置，先在文件顶部补全导入：

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

2. 确认组件声明与模块作用域配置正确 #

你现在AppModule的declarations数组里只有AppComponent，两个容易踩的坑：

• 如果写了<mat-icon>的模板不属于AppComponent，是你单独生成的其他组件，必须把这个组件加到它所属模块的declarations数组里
• 如果这个组件属于某个懒加载模块、独立特性模块，不能只在AppModule里导入MaterialModule，必须把MaterialModule（或直接导入MatIconModule）加到对应特性模块的imports数组里。注意：Angular的模块作用域不支持全局继承，父模块导入的组件不会自动对子模块生效。

3. 对齐依赖版本解决兼容问题 #

你当前的依赖存在版本不匹配问题：核心Angular包版本锁定在10.2.5，@angular/cdk是10.2.7，但@angular/material和material-moment-adapter用的是^10.0.0的范围版本，安装时可能拉取到和核心包不完全兼容的版本，触发组件识别异常。
执行以下命令把相关包版本对齐到和核心包一致的10.2.5：

npm install @angular/material@10.2.5 @angular/cdk@10.2.5 @angular/material-moment-adapter@10.2.5 --save

执行完成后删除项目下的node_modules文件夹和package-lock.json文件，重新运行npm install安装全量依赖。

4. 重启开发服务 #

修改模块配置、重装依赖后，ng serve的热更新经常无法正确识别模块变更，直接停掉当前运行的开发服务，重新执行ng serve启动即可。

后续注意 #

等编译错误修复后，如果图标显示为空心方块，在index.html的<head>标签内引入Material Icons字体资源即可正常渲染图标。

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