升级至Angular v15后mat-icon的matBadge无法显示文本仅显示特殊字符

问题分析 #

升级到Angular v15后，mat-icon组件上的matBadge无法显示数字文本，但特殊字符（如!、&）正常显示，且DOM中包含数字的span元素已存在，说明组件逻辑正常，问题出在样式层面——大概率是徽章文本颜色与背景色重叠，或字体大小被继承导致不可见。

解决方案 #

1. 强制设置徽章文本颜色

添加自定义CSS覆盖默认样式，确保文本与背景有明显对比：

.mat-badge-content {
  color: #ffffff !important;
}

2. 调整徽章字体大小与内边距

若因字体过小导致看不见，可调整字体和内边距：

.mat-badge-content {
  font-size: 12px !important;
  padding: 2px 6px;
}

3. 使用预设颜色配置

直接通过组件属性设置徽章的颜色组合，避免样式冲突：

<button mat-flat-button>
  <mat-icon matBadge="1" matBadgeColor="warn" matBadgeBackgroundColor="white">home</mat-icon>
</button>

4. 修正mat-icon的显示模式

Angular v15中mat-icon的默认display属性可能影响徽章渲染，添加mat-icon-inline类：

<mat-icon matBadge="1" class="mat-icon-inline">home</mat-icon>

验证 #

在示例环境中，添加上述任意一种样式调整后，数字徽章即可正常显示。

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