Angular Material Badge：让 MatBadge 包含图标而不是文本？答案

【问题标题】：Angular Material Badge: Make MatBadge contain an icon instead of text?Angular Material Badge：让 MatBadge 包含图标而不是文本？
【发布时间】：2019-02-09 04:37:03
【问题描述】：

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

有谁知道我必须做什么才能实现这一目标？我想我可以使用 jQuery，但我想知道是否有更顺畅/更简单的方法。

【问题讨论】：

你找到方法了吗？

标签： javascript angular angular-material

【解决方案1】：

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

否则，您可以使用很多纯文本符号，例如★✎♥，...

【讨论】：

设置badge.style.display 打破matBadgeHidden。我排除了这个并且效果很好。
他们本来可以编辑他们的 CSS。如果您确定帖子不再有效，请不要犹豫编辑帖子。

【解决方案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>

【讨论】：

【解决方案3】：

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

然后在你的css文件中：

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

【讨论】：

干净、快速、直接，谢谢！