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.
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:
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
.