Switch to M&TIconography
Icons are symbols that represent concepts, objects or actions, and have semantic purpose within a layout. They should always be recognizable, functional and easily understood.
Icon Font
Icons may be added to any inline element. To add an icon, include the icon class as well as the class name of the specific icon you want to use. Icon names reflect what the icon shows, not what it means, and are dash separated, e.g. icon--card-in-slot.
<i class="icon icon--bar-graph"/>Icon Sizes
Icons can be modified from their base size (1em) using modifier classes:
| Class | Size | Example |
|---|---|---|
| (default) | 1em | |
| .icon--sm | .75em | |
| .icon--lg | 1.5em | |
| .icon--xl | 2em |
Accessibility
Elements with an icon class must also have an aria-labelledby attribute whose value matches that of the id attribute on the element with the icon's associated text label.
<label id="check"/>Order Checks</label>
<i aria-labelledby="check" class="icon icon--check"/>
