Use font awesome icons in mat badge

mat-badge-icon.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

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

  @Input() matBadgeIcon: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    if (!this.matBadgeIcon) return;

    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="${this.matBadgeIcon}"></i>`;
  }
}