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

Question

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>

Answer 1

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

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