Icons

We use the Material Design Icons for our icon set. Specifically, we use the icon font for ease.

Note: The pre-release versions of the Design System made use of native SVG Material Design Icons. We currently still support social links

Usage

Icons are placed using any inline element with the right classes and the icon’s name.

Code

<i class="miz-icon material-icons miz-icon--sm">accessibility_new</i>
<i class="miz-icon material-icons miz-icon--md">check_circle</i>
<i class="miz-icon material-icons miz-icon--lg">report_problem</i>
<i class="miz-icon material-icons miz-icon--xl">cloud</i>

Output

accessibility_newcheck_circlereport_problemcloud


Sizes

Icons are displayed at the following sizes, using a modifier class on the <svg> tag:

Size Class
18px .miz-icon--sm
24px .miz-icon--md
36px .miz-icon--lg
48px .miz-icon--xl

Color

Color fills may be applied using text color utility classes.

Code

<i class="miz-icon material-icons miz-icon--sm miz-text--blue">accessibility_new</i>
<i class="miz-icon material-icons miz-icon--md miz-text--green">check_circle</i>
<i class="miz-icon material-icons miz-icon--lg miz-text--red">report_problem</i>

Output

accessibility_new check_circle report_problem


Twig

To use the Twig macro, see the Components section.