How to customize the color of specific mat badge?

Question

I have two matbadges, I want one in red and one in yellow. For the one in red I'm using: = 0" matBadge="{{element.failedTests}}" matBadgeColor="warn">

For the other one, I can't find a yellow color from the default matBadgeColor values. How can I customize it?

Answer 1

You can use following css styling to do that.

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

Answer 2

Tbh. I'm not a big fan of Angular Materials because they are kept under a deeper lock than self created components. Of course there are ways to override these styles, but I personaly think that's just a nasty workflow.

Spontanious there are 3 possibilites that come to my mind, that may achieve what you want:

1. Create your own Theme Style with the palette Theme colors that you want with one of these angular-material color editors:

   • mbitson's Online Color-Editor

   • material.io's Online Color-Editor

   • material.io's Downloadable Color-Editor for MacOS

2. Create your own Badge component! This would in my opinion be the best choice due to the fact that you can keep your component as dynamic as you need it to be. For example implementing and changing colors of a selfmade component is very much easier than changing a component provided by angular-materials.

3. Turn off view encapsulation and override the badge class style in your s/css. Be careful with this step, changing colors of unencapsulated components can if applied wrong also change the color of other non encapsulated elements because they are not scoped anymore

If I were in your position, I would create my own component for the badges. With this way it's much easier to make it adaptable to custom changes like colors etc and there are tons of examples of how to create a circle with plain css. Just keep in mind to also check for legacy techniques to be able to support older browsers.

Hope that helps! (: