Angular Material 17.3更新后mat-button-toggle多余勾选标记的解决方法

不需要更换组件，通过CSS样式覆盖就能解决这个问题，具体方法如下：

• 组件内局部覆盖（针对指定按钮）
  在使用该按钮的组件样式文件中添加：

  ::ng-deep .btn-primary.mat-button-toggle-checked .mat-button-toggle-checkmark {
    display: none;
  }
  

  该代码只会影响带有btn-primary类的按钮，不会全局修改所有mat-button-toggle组件。

• 全局样式覆盖（所有按钮生效）
  如果希望项目中所有mat-button-toggle都去掉勾选标记，直接在项目根目录的styles.scss或styles.css中添加：

  mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-checkmark {
    display: none;
  }
  

原因说明 #

Angular Material 17.0到17.3的小版本更新中，调整了mat-button-toggle在checked状态下的默认视觉样式，新增了勾选标记作为选中反馈。官方文档未单独提及这个细节，但通过样式覆盖可以轻松恢复升级前的无标记样式。

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