Icons

Symbols used to enhance communication

Demo

API

Tag

Name Type Content
m-icon Custom tag None

Attributes

Name Value Description
name required See available icons below Sets the icon's symbol
fill Boolean attribute Uses filled version

Guidelines

Available icons

Mdash now uses Material Symbols Outlined. On that page, getting an icon name is easier if you click the icon, then select the Android tab, then copy the name.

Pair with some text

Icons should be used to enhance content not replace it. Users can misinterpret icons, so strive to accompany an icon with a label or other relevant content in close proximity.

John Doe
Profile Settings
Log out

If an icon is on its own, use the title attribute to explain what it symbolizes (e.g. "Your current location") or its action (e.g. "Reload this page", like your browser's refresh icon). Hover over the user icon for a clue:

Profile Settings
Log out

Why not SVG?

Implementing SVG icons requires a relatively expensive abstraction and because there is no visual or accessibility difference between SVG and glyph icons, that abstraction would be all cost and no benefit. Mdash icons require no JavaScript and so they save kilobytes and have maximum compatibility. You can read more about the differences between SVG and glyphs here.

Accessibility

Because icons should be paired with some text (see above) they should reference that text with aria-labelledby attribute. In cases where there is no label, use aria-label and title.