'How to customize the color of specific mat badge?

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?

angular mat

Solution 1:^[1]

You can use following css styling to do that.

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

Solution 2:^[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:

Create your own Theme Style with the palette Theme colors that you want with one of these angular-material color editors:
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.
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! (:

Solution 3:^[3]

Based on @nipun-kavishka answer

To override color of a specific badge element and state (warn, accent etc) without disrupting style encapsulation, we can add a marker class (my-custom-badge-accent) for badge container and override its descendent mat-badge-content style. So all badge containers having my-custom-badge-accent class having accent color will be styled as specified.

In global styles.css:

.my-custom-badge-accent.mat-badge-accent .mat-badge-content {
    background-color: #f1bf28;
    color: white;
}

In HTML template:

<span class="my-custom-badge-accent" [matBadge]="haveWarningsFlag" matBadgeColor="accent"> </span>

Solution 4:^[4]

If you use the material theme: deeppurple-amber to get the yellow color you need matBadgeColor="accent"

Solution 5:^[5]

The answer from @nipun-kavishka is already good enough.

But, if you want to make Material use your corporate colors everywhere, check the Angular Theming page that has instructions about how to create your own theme: https://material.angular.io/guide/theming

There you can define for example what the "primary" color should be for every component, so you don't need to target Material's classes in CSS like .mat-badge-content

Solution 6:^[6]

@nipun-kavishka I had to add the !important clause to work:

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

Solution 7:^[7]

With this you can customize the colors:

::ng-deep .mat-badge-content { 
    background: red !important; 
    color: black !important 
}

Solution 8:^[8]

Just use:

.mat-badge-your-color{
    .mat-badge-content{
        background : #000;
        color: #fff;
    }
}

notifications = 0;
  priority = 'LOW';
  priorities = [
    'HEIGH',
    'MEDIUM',
    'LOW'
  ];

.mat-badge-HIGH,{
    .mat-badge-content{
        background : #9c1d1d;
        color: #fff;
    }
}
.mat-badge-MEDIUM, [matBadgeColor=MEDIUM]{
    .mat-badge-content{
        background : #cc7109;
        color: #fff;
    }
}
.mat-badge-LOW, [matBadgeColor=LOW]{
    .mat-badge-content{
        background : #ffe600;
        color: #fff;
    }
}

<i class="far fa-bell" 
            matBadge="{{notifications}}" 
            matBadgePosition="before" 
            matBadgeColor="{{priority}}" 
            [matBadgeHidden]="notifications < 1"
            ></i>

Solution 9:^[9]

If you want to overwrite the existing Material-Colors, so I use to do this:

HTML

<div matBadge="10" matBadgeColor="primary">
<div matBadge="99" matBadgeColor="accent">
<div matBadge="@" matBadgeColor="custom">

SCSS

    [matBadgeColor=primary]{
        .mat-badge-content{
            background : #05a3ff;
            color: #fff;
        }
    }
    
    [matBadgeColor=accent]{
        .mat-badge-content{
            background : #69ff05;
            color: #fff;
        }
    }

    /** CUSTOM **/
    [matBadgeColor=custom]{
        .mat-badge-content{
            background : #c6c6c6;
            color: #fff;
        }
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nipun-kavishka
Solution 2
Solution 3	tequilacat
Solution 4	Caro
Solution 5	Daniel
Solution 6	fuegonju
Solution 7	Crasher-Ju
Solution 8	AndyNope
Solution 9

'How to customize the color of specific mat badge?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]