Badge

matBadge for notifications, counts, and status indicators on icons and buttons.

Basic Badges

matBadge on buttons with color and position attributes.

HTML

<button mat-raised-button
  [matBadge]="4"
  matBadgePosition="after"
  matBadgeColor="primary">
  Notifications
</button>

<button mat-icon-button
  [matBadge]="7"
  matBadgeColor="warn"
  aria-label="Alerts">
  <mat-icon>notifications</mat-icon>
</button>

Badge Overlap & Size

matBadge with overlap and size variants.

HTML

<button mat-icon-button
  [matBadge]="8"
  matBadgeColor="primary">
  <mat-icon>shopping_cart</mat-icon>
</button>

<button mat-icon-button
  [matBadge]="99"
  matBadgeSize="small"
  matBadgeColor="accent">
  <mat-icon>mail</mat-icon>
</button>

<button mat-icon-button
  [matBadge]="12"
  matBadgeSize="large"
  matBadgeColor="warn">
  <mat-icon>notifications_active</mat-icon>
</button>