javascript - Angular Material 徽章:使MatBadge包含图标而不是文本？

使用angular/material 6.2.1，我试图将徽章添加到按钮，效果很好。但是，我不想显示可以通过使用matBadge指令设置的纯文本，而是希望徽标显示 Material 图标。

有谁知道我必须做些什么才能做到这一点？我想我可以使用jQuery，但我想知道是否可能有更顺畅/简便的方法。

最佳答案

目前，他们的API中没有公开实现该目标的工具。您必须自己操纵DOM:

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

您可以编写一个简单的指令以优雅且可重用的方式执行此操作:

@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>`;
  }
}

用法:<div matBadge matBadgeIcon="check">...</div>
否则，您可以使用很多纯文本符号，例如★✎♥，...。