Angular Material Badge: Make MatBadge contain an icon instead of text?

I solved this by simply setting f.e. matBadge="person" on the button.

And then in your css file:

.mat-badge-content {
    font-family: 'Material Icons';
}

There is nothing exposed in their API to achieve it at the moment. You have to manipulate the DOM by yourself:

$0.innerHTML = '<i class="material-icons">check</icon>'

You can write a simple directive to do it in a elegant and reusable way:

@Directive({
  selector: '[matBadgeIcon]'
})
export class MatBadgeIconDirective {

  @Input() matBadgeIcon: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    const badge = this.el.nativeElement.querySelector('.mat-badge-content');
    badge.style.display = 'flex';
    badge.style.alignItems = 'center';
    badge.style.justifyContent = 'center';
    badge.innerHTML = `<i class="material-icons" style="font-size: 20px">${this.matBadgeIcon}</i>`;
  }
}

Usage: <div matBadge matBadgeIcon="check">...</div>

Otherwise there is a lot of plain text symbols that you can use like ★✎♥ ,...