Javascript 角度材质徽章：是否使MatBadge包含图标而不是文本？

使用

angular/material 6.2.1

，我尝试在按钮上添加徽章，效果很好。但是，我不希望显示可以使用

matBadge

指令设置的纯文本，而是希望该徽章显示材质图标

---

有人知道我要做什么才能做到这一点吗？我想我可以使用jQuery，但我想知道是否有一种更平滑/更简单的方法可以做到这一点。

目前他们的API中没有任何东西可以实现这一点。您必须自己操作DOM：

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

$0.innerHTML='check'

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

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

@指令({
选择器：“[matBadgeIcon]”
})
导出类MatBadgeIconDirective{
@Input（）图标：字符串；
构造函数（私有el:ElementRef）{}
恩戈尼尼特（）{
const badge=this.el.nativeElement.querySelector（“.mat badge content”）；
badge.style.display='flex'；
badge.style.alignItems='center'；
badge.style.justifyContent='center'；
badge.innerHTML=`${this.matBadgeIcon}`；
}
}

用法：

…

---

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

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

仅更改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>

报告问题

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

然后在css文件中：

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

---

你找到方法了吗？设置

badge.style.display

breaks

matBadgeHidden

。我排除了这一点，效果很好。从那时起他们就可以编辑他们的css了。如果你确信这篇文章不再有效，请毫不犹豫地编辑它。简洁、快速、直截了当，谢谢！