Material Design Icons MDI is a very helpful design resource for Web Design that is based on Google’s specification of Material Design. MDI is a community-driven project to create an increased icon-set based on the official Material Design Icon repository provided by Google. The Icon set is a growing collection fully integrated by the Jekyll theme usable out-of-the-box.
HTML Markup
There is no official markup for font icons, but 2 markups are widely used. Both markups can be used in block elements like the anchor tag <a>. That way, it’s on you what to use for font icons.
<span class="mdi mdi-name" role="img" aria-label="name" ></span> (1)
<i class="mdi mdi-name"></i> (1) (2)| 1 | Both forms are consistent with the HTML5 spec |
| 2 | It’s short and the <i> tag may associated for an icon (semantic meaning) |
The <i> tag provides more meaning to machines because of the HTML spec, it provides more meaning to humans because the i can easily associated with icon. And it’s only one letter long - that win! And if you make sure to include equivalent text either inside the <i> tag or right next to it (as Twitter for Bootstrap does), then screen readers understand where to click to reply, the link is usable if CSS doesn’t load, and human readers with good eyesight and a decent browser see a pretty icon. |
Asciidoc Markup
For pages using Asciidoc for the source (default), a easier solution is to use Markups from Asciidoc.
pass:[<i class="mdi mdi-<name> mdi-<size> mdi-<modifier>"></i>] (1)
mdi:<name>[<size>, <modifier>] (2)| 1 | Markup using a pass block |
| 2 | Markup using the Asciidoc extension (mdi:) |
Sizes
For more eye-minded placement, or to place emphasis on, all icons can be specified in different sizes by the optional parameter size.
The size of an icon is typically specified relative to the base font size. Today, the base font size is set to 16px. That mean for for font icons, that the width of an icon is set to 32px if a relative size of 2x is specified. |
See with the following what sizes are available.
Fixed Size
If needed, the icon size can given in absolute sizes from 18px to 48px.
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| |
BS Grid Size
For a better Bootstrap integration, the icon size can be given like the view-port shortcuts xs, sm, md, lg and xl.
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| | |
| |
Relative Size
All icons can be specifier relativ to the base size of 1em from 1x to 10x. See the examples with the table below.
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| | |
| |
Rotate
To vary icons in their orientation, the icons can be rotated for 7 different angle. This is quite useful, if an icon has an orientation already but does not fit your need.
Using flip- and rotate- at the same time is not supported |
| Class | Result | Code |
|---|---|---|
no | | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
Flip
Like rotate, an icon can be flipped by horizontal and vertical axes. It is similiar to rotate but the angle (perspective) remains unchanged.
Using mdi-flip- and mdi-rotate- at the same time is not supported |
| Class | Result | Code |
|---|---|---|
no | | |
| | |
| |
Spin and Pulsed
For realy eye-minded placements of icons, icons can be animated im terms of rotation and pulse. Be careful using animated icons, because this may cause disturbing effects and can demand unwanted attention.
| Class | Result | Code |
|---|---|---|
no | | |
| | |
| | |
| |
Color Palette
The implementation of MDI font icons support the full color palette of Google's_ Material design specification.
BW Colors
The default color set used for MDI are black-and-white for the flavours light and dark of default (dark) if not specified.
| Class | Result | Code |
|---|---|---|
| active | |
| inactive | |
| active | |
| inactive | |
| active | |
| inactive |
BS Colors
The implementation of MDI font icons support the base color palette of Bootstrap range from primary to danger.
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
| |
MD Color Palette
For J1 Theme, 17 additional color variations are available comply with the concepts of Google Material Design:
Indigo
The color Indigo is used as the primary color for J1 Theme. You’ll find this color quite often in various weights (ranges from 50 to 900).
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
Pink
The color Pink is used as the complementary color for J1 Theme. You’ll find this color to put an emphasis on some elements. All colors comes in ranges from 50 to 900 but for Pink mostly the default weight of 500 is used.
| Class | Result | Code |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
Icon Preview
To preview the Material Design Icon Font, go for the Icon Picker to show all font icons available.