Skip to main content

angular material - How to use custom Badge size

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .mat-badge-content {
      width: auto;
      display: grid;
      min-width: 40px;
      min-height: 36px;
      text-align: center;
      align-items: center;
      padding: 5px 3px;
      margin-top:-28px;
      margin-right: -16px;
    }
  `]
})


export class AppComponent { }
app.component.html 

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


<span 
  matBadge="15"
  matBadgeOverlap="false">
    Custom size badge 
</span>
app.module.ts [import] 

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