Skip to main content

angular material - How to show custom color in Badge

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .mat-badge-content {
      background: SeaGreen;
      color: LightGreen;
    }
  `]
})


export class AppComponent { }
app.component.html 

<h2 style="padding-top:25px; padding-bottom:50px;">
  Angular Material - How to use custom Badge color
</h2>


<span 
  matBadge="9"
  matBadgeOverlap="false"
  matBadgeSize="large">
    Custom badge color
</span>
app.module.ts [import] 

import { MatBadgeModule } from '@angular/material/badge'
More Angular tutorials
Labels: