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?

Rostov

Answer 1

You can use following css styling to do that.

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

Educe

Answer 2

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>

Showiness

Answer 3

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.

Dixie

Answer 4

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

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

Assisi

Answer 5

With this you can customize the colors:

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

Executioner

Answer 6

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

Cutback

Answer 7

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

Fax

Answer 8

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

Aloke

Looks good, but how to make this work? – Yelenayelich

Have you copied the code and tried yourself in an example? – Aloke

yep, didn't work for me. – Yelenayelich

It depends, can you debug, if something else is overwriting it again or have you disbabled Styling in Angular? – Aloke

Do you have Stackblitz? – Aloke

Answer 9

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>

Aloke

Answer 10

Overwriting the background and text color of accent for badge:

SCSS:

.mat-badge-accent {
  --mat-badge-background-color: green !important;
  --mat-badge-text-color: white !important;
}

HTML:

<mat-icon color="primary" slot="end" matBadge="✓" matBadgeColor="accent" matBadgeSize="small">help</mat-icon>

Result:

Snailfish