How to customize the color of specific mat badge?

user_3919921 0
Viewed 9437

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?

enter image description here

mat angular
9 Answers

You can use following css styling to do that.

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

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:

  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! (:

user_98480760

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>
user_20756050

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

user_102834640

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

user_3039140

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

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

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

With this you can customize the colors:

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

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>

user_90610850
Related