angular material - How to change Badge size

app.component.html

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


<span 
  matBadge="5"
  matBadgeOverlap="false"
  matBadgeSize="small">
    Small size badge 
</span>

<br/><br/><br/>
<span 
  matBadge="5"
  matBadgeOverlap="false"
  matBadgeSize="medium">
    Medium size badge
</span>

<br/><br/><br/>
<span 
  matBadge="5"
  matBadgeOverlap="false"
  matBadgeSize="large">
    Large size badge
</span>

app.module.ts [import]

import { MatBadgeModule } from '@angular/material/badge'

More Angular tutorials

• angular material - How to align Tabs
• angular material - How to disable Tabs content animation
• angular material - How to generate Tabs programmatically
• angular material - How to create & add Tab programmatically
• angular material - How to use Slider
• angular material - Slider step, minimum & maximum value
• angular material - Tick interval with step in Slider
• angular material - How to invert Slider
• 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 use custom Badge size
• angular material - How to show custom color in Badge
• angular material - How to use Selection List