Badges show notifications, counts, or status on navigation items
and icons. Leave a <span class="badge"> empty for
a small badge, a 6dp dot. Put a label or number
inside for a large badge, a 16dp stadium. Nest the
badge in the icon so it anchors at the upper trailing edge of
the 24dp glyph. Limit content to four characters, including
+.
Badges use error / on-error by default. If
you override the color, pair a fill utility with its
on-* text class.
<span class="material-symbols" role="img" aria-label="Mail, unread">mail<span class="badge"></span></span>
<span class="material-symbols" role="img" aria-label="Mail, 1 unread">mail<span class="badge">1</span></span>
<span class="material-symbols" role="img" aria-label="Mail, 999+ unread">mail<span class="badge">999+</span></span>Small
Leave the badge empty. It is a 6dp circle with no label that marks something as unread. Use a large badge for a count.
<span class="material-symbols" role="img" aria-label="Notifications, unread">notifications<span class="badge"></span></span>Large
Put a number or short label in the badge. It is 16dp high, with
stadium corners and a 4dp inset. Cap the string at four
characters. Use 999+ when the count is larger.
<span class="material-symbols" role="img" aria-label="Mail, 1 unread">mail<span class="badge">1</span></span>
<span class="material-symbols" role="img" aria-label="Mail, 999+ unread">mail<span class="badge">999+</span></span>In a list
Put a .badge at the end of a list row to show a count.
It stays in flow there and does not overlap the leading icon.
- Inbox 3
- Sent
<ul class="list">
<li>
<span class="material-symbols" aria-hidden="true">inbox</span>
Inbox
<span class="badge">3</span>
</li>
</ul>Color
The default is error / on-error. Override
it with a fill utility and its on-* pair when the badge
is not an error or notification.
mail3
<span class="badge">3</span>
<span class="badge primary on-primary-text">1</span>