angular material - How to show Badge with icon

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to show Badge with icon
</h2>

<h3>Default size badge</h3>
<mat-icon matBadge="9" matBadgeColor="warn">
  cloud
</mat-icon>

<h3>Badge no overlap</h3>
<mat-icon matBadge="9" matBadgeOverlap="false">
  cloud
</mat-icon>

<h3>Small size badge</h3>
<mat-icon matBadge="9" matBadgeSize="small">
  cloud
</mat-icon>

<h3>Badge position before</h3>
<mat-icon matBadge="9" matBadgePosition="before">
  cloud
</mat-icon>

app.module.ts [import]

import { MatBadgeModule } from '@angular/material/badge'
import { MatIconModule } from '@angular/material/icon';

More Angular tutorials

• angular material - How to use Slider input event
• angular material - How to use Slide toggle
• angular material - How to change Slide toggle checked color
• angular material - How to use Badge with text
• angular material - How to change Badge position
• angular material - How to toggle Badge visibility
• angular material - How to show Badge in a button
• angular material - Badge position before & below after
• angular material - Determine an Expansion Panel is opened or closed
• angular material - Determine an Expansion Panel is disabled or enabled
• angular material - How to toggle Expansion Panel expanded state
• angular material - Navigation list with button and icon
• angular material - How to use Action List
• angular material - Action list with button and icon
• angular material - How to use Selection List