Jekyll One

Material Design Light MDIL is a helpful design resource supported by the theme JekyllOne for Web Sites that follow Google’s specification of Material Design. MDIL is a subset of the Material Design Icons (MDI) set managed by Austin Andrews and contributors.

The icon set is still work in progress. The team is in the process of building the icon set into a fully fledged alternative to MDI. Have a look at MaterialDesignLight for latest versions.

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="mdil mdil-name" role="img" aria-label="name" ></span> (1)
<i class="mdil mdil-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.

Markup using a pass block
pass:[<i class="mdil mdil-<name> mdil-<size> mdil-<modifier>"></i>]

Material Designs Icons can be used as inline icons by using the mdil: inline macro:

Markup using a inline macro
mdil:icon_name[icon_size, modifier]   (1) (2) (3)
1 All icon_name can be found on the preview page for MDI Light Icon Previewer
2 The icon_size attribute can be one of: xs, sm, lg and 1x to 10x
3 The modifier can be used to set the e.g the color (md-gray), an animation (fa-pulsed) or the orientation (fa-rotate-45)
Click on button VIEW to see how it’s looks alike
mdil:bank[2x, ml-3 mr-2 mb-2] Bank

Bank

Parameters icon_size and modifier are optional. If not given, the icons size is set to default (1x), the color to black and no settings for the modifier are applied.

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.

Table 1. Fixed (absolute) sizes
Class Result Code

mdil-18px

<i class="mdil mdil-18px mdil-account"></i>

mdil-24px

<i class="mdil mdil-24px mdil-account"></i>

mdil-36

<i class="mdil mdil-36px mdil-account"></i>

mdil-48px

<i class="mdil mdil-48px mdil-account"></i>

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.

Table 2. Relative sizes
Class Result Code

mdil-1x

<i class="mdil mdil-1x mdil-account"></i>

mdil-2x

<i class="mdil mdil-2x mdil-account"></i>

mdil-3x

<i class="mdil mdil-3x mdil-account"></i>

mdil-4x

<i class="mdil mdil-4x mdil-account"></i>

mdil-5x

<i class="mdil mdil-5x mdil-account"></i>

Icon Overview

The Material Design Light Icon Font support a growing set of 250+ icons (v0.2.63) from a wide varity of topics.

Click on the elements below to copy icon data to clipboard.