Question

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

有人知道我要实现这个目标需要做什么吗？我想我可以使用jQuery，但我想知道是否可能有更顺畅/便捷的方法。

Answer 1

我通过简单地设置f.e该按钮上的matBadge =“ person”。

然后在您的CSS文件中：

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

Answer 2

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

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

Answer 3

此答案适用于希望在徽章内使用长字符串的人：

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

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

3 个答案: