Angular Material 14升级至15：MatButton与MatIconButton冲突问题

错误说明 #

Error: NG0300: Multiple components match node with tagname button: MatButton and MatIconButton

Angular Material 15对按钮组件的匹配逻辑做了严格调整，不再允许同一个<button>标签同时触发MatButton和MatIconButton的匹配，核心原因是模板或配置中存在冲突的指令使用。

具体解决步骤 #

• 排查模板按钮指令：检查所有<button>标签，确保每个按钮仅使用一个Angular Material按钮指令：
  • 带文字的图标按钮：用mat-button，内部嵌套<mat-icon>，不要加mat-icon-button
  • 纯图标按钮：仅用mat-icon-button，不要额外添加mat-button
    正确代码示例：

  <!-- 常规带图标按钮 -->
  <button mat-button>
    <mat-icon>edit</mat-icon>
    编辑
  </button>
  
  <!-- 纯图标按钮 -->
  <button mat-icon-button>
    <mat-icon>delete</mat-icon>
  </button>
  

• 清理模块导入冗余：Angular Material 15中MatIconButton已整合进MatButtonModule，无需单独导入，确保模块中没有重复导入或声明冲突的模块。
• 移除动态指令冲突：检查是否存在[attr.mat-button]这类动态绑定，这类写法在14版本可能兼容，但15版本会触发匹配冲突。
• 使用官方迁移工具：运行CLI命令自动修复部分兼容性问题：

  ng update @angular/material@15
  

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