CODEWITHSUNDEEP
angularangular-material
koque
koque

Reputation: 2256

How can I change the background-color and color of matBadge?

I want to change both the background and text color of a Material badge instead of using the standard material color, how do I do this?

<mat-icon matBadge="{{this.userService.numberOfCartItems}}" 
     matBadgePosition="above after" matBadgeColor="accent">
     shopping_cart
</mat-icon>

Upvotes: 6

Views: 5253

Answers (1)

Thomas Hetzer
Thomas Hetzer

Reputation: 1637

You can change the background and color properties for the class mat-badge-content:

.mat-badge-content {
    background: red;
    color: blue;
}

Upvotes: 12

Related Questions