Getting Started with the Webfont

The webfont is a quick way to integrate the icons into your application.

npm install @mdi/light-font

https://cdn.jsdelivr.net/npm/@mdi/light-font@0.2.63/css/materialdesignicons-light.min.css

Each icon can be referenced by their name prefixed with mdil-. For instance to get the home icon mdil-home.

Bob lives in a <span class="mdil mdil-home"></span>.

Material Design Icons Light (MDIL) contains many helper classes to quickly modify the look of the icons.

• mdil-rotate-45 - Rotates 45 Degrees.
• mdil-rotate-90 - Rotates 90 Degrees.
• mdil-rotate-135 - Rotates 135 Degrees.
• mdil-rotate-180 - Rotates 180 Degrees.
• mdil-rotate-225 - Rotates 225 Degrees.
• mdil-rotate-270 - Rotates 270 Degrees.
• mdil-rotate-315 - Rotates 315 Degrees.

<span class="mdil mdil-account mdil-rotate-45"></span>

• mdil-flip-h - Flip horizontal.
• mdil-flip-v - Flip vertical.

<span class="mdil mdil-account mdil-flip-h"></span>

• mdil-spin - Spinning icon.

<span class="mdil mdil-loading mdil-spin">Processing</span>

<div class="mdil-set">
    <span class="mdil-star"></span>
    <span class="mdil-star"></span>
    <span class="mdil-star"></span>
    <span class="mdil-star-outline"></span>
    <span class="mdil-star-outline"></span>
</div>

There are a few aria- attributes that can be added to the icon's tag or the parent's element to make things easier for screen readers.

Many times, an icon has text next to it that explains the things. The icon is just for decoration so the screen reader can ignore it.

<span class="mdil mdil-bookmark" aria-hidden> Bookmark Item

• fonts/
  • materialdesignicons-light-webfont.eot
  • materialdesignicons-light-webfont.ttf
  • materialdesignicons-light-webfont.woff
  • materialdesignicons-light-webfont.woff2
• css/
  • materialdesignicons-light.min.css - Minified CSS
  • materialdesignicons-light.min.css.map - Developer Tools Map
• sass
  • _animated.scss - Animations
  • _core.scss - The base .mdil class
  • _extras.scss - Rotate / Flip / Colors
  • _functions.scss - Helpers
  • _icons.scss - Icon data
  • _path.scss - Webfont paths
  • _variables - All available variables
  • materialdesignicons-light.sass - Main
• preview.html - Preview all icons

The webfont can be built with the contents of the @mdi/light-svg and @mdi/font-build.

# Extract https://github.com/Templarian/MaterialDesignLight-SVG/archive/master.zip
# Inside of the folder run
npx @mdi/font-build
# The /dist folder contains the generated files

Learn more: @mdi/font-build