Angular Material Badge: Make MatBadge contain an icon instead of text?

user_10206607 0
Viewed 16434

Using angular/material 6.2.1, I am trying to add a badge to a button, which works fine. However, instead of showing plain text that I can set by using the matBadge directive, I would like the badge to show a material icon instead.

Does anyone know what I have to do to achieve this? I suppose I could use jQuery but I am wondering whether there might be a smoother/easier way to do so.

angular-material angular javascript
3 Answers

I solved this by simply setting f.e. matBadge="person" on the button.

And then in your css file:

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

There is nothing exposed in their API to achieve it at the moment. You have to manipulate the DOM by yourself:

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

You can write a simple directive to do it in a elegant and reusable way:

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

Usage: <div matBadge matBadgeIcon="check">...</div>

Otherwise there is a lot of plain text symbols that you can use like ★✎♥ ,...

user_57350300

This answer is for those who want to use long string inside the badge:

Changing only the CSS: 

.custom-badge {

  .mat-badge-content {

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

in template:

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