Search code examples
angularangular-material

Upgraded to Angular v15 and mat badges won't show text on mat-icons. But will show special characters, like '&, !, ...'. Was working before on v14

<button mat-flat-buton>
  <mat-icon matBadge="1">home</mat-icon>
</button>

angular icon button with badge

<button mat-flat-buton>
  <mat-icon matBadge="!">home</mat-icon>
</button>

angular icon button with badge

I've checked the html and I see the span with the text there screenshot of html elements

stackblitz link

any help would be really appreciated, thanks!

Solution

  • The property matBadge only accepts icons of material-icons, the reason you are not able to view the text is because of the property font-family: 'Material Icons'; from the class .material-icons, we can override this with the below SCSS

    Componnent level using ::ng-deep

    ::ng-deep .show-text-on-badge > mat-icon > span {
  font-family: initial !important;
}

    Global style level

    .show-text-on-badge > mat-icon > span {
  font-family: initial !important;
}

    We can add the class (.show-text-on-badge) to configure it to accept text.

    <button mat-flat-buton class="show-text-on-badge">
  <mat-icon matBadge="1">home</mat-icon>
</button>

    You can style the text to your liking using the above method.

    Stackblitz Demo