Значок углового материала: сделать так, чтобы MatBadge содержал значок вместо текста?

Question

Используя angular/material 6.2.1, я пытаюсь добавить значок к кнопке, которая работает нормально. Однако вместо того, чтобы показывать простой текст, который я могу установить с помощью директивы matBadge, я бы хотел, чтобы на значке вместо этого отображался значок материала.

Кто-нибудь знает, что я должен сделать, чтобы добиться этого? Я полагаю, что мог бы использовать jQuery, но мне интересно, может ли быть более плавный / простой способ сделать это.

Answer 1

Этот ответ для тех, кто хочет использовать длинную строку внутри значка:

Изменение только 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 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>

В противном случае вы можете использовать множество простых текстовых символов, таких как ★ ★ ♥, ...