Angular Material - Empty Badge

Use [matBadgeHidden] = "true" for dynamically control visibility of matBadge, e.g.:

<span [matBadgeHidden] = "commentCount == 0"  [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>

In looking at the source for the badge component, it looks like this is by design due to lines:

'[class.mat-badge-hidden]': 'hidden || !_hasContent',
...
this._hasContent = value != null && `${value}`.trim().length > 0;

It does look like you can use matBadge="​" to have an empty badge show to work around this.

You will have to add a class for yourself to hide the text. The mat-badge has no functionality to hide the content. White space or   will not work:

.mat-badge.hide-text .mat-badge-content {
  color: transparent;
}

<span matBadge="0" matBadgeColor="warn" class="hide-text">Look at these notifications!</span>

Update:

If you really don't want to use a class, you can use the ⁠. This is a so called WORD JOINER. Mileage may vary with Angular version :), but this will print an empty badge

<span matBadge="&#8288;" matBadgeColor="warn">Look at these notifications!</span>