角材料徽章：使MatBadge包含图标而不是文本？

Question

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

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

Answer 1

我通过简单地在按钮上设置 fe matBadge="person" 解决了这个问题。

然后在你的 css 文件中：

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

Answer 2

这个答案适用于那些想要使用长字符串的人在徽章内的人：

仅更改 CSS：

.custom-badge {

  .mat-badge-content {

    width: fit-content;
    text-align: center;
    border-radius: 7px;
    left: 13px;
  }
}

在模板中：

<mat-icon 
class="custom-badge"
matBadge="1,2,4"
matBadgePosition="after" 
matBadgeColor="accent"
[matBadgeHidden]="myExpresion" 
>
 report_problem
</mat-icon>

Answer 3

目前，他们的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>

否则，您可以使用很多纯文本符号，例如???。，...