Getting Started with the Webfont

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

Setup

npm install @mdi/font
https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css

Basic Example

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

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

Helper Classes

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

Rotate

  • mdi-rotate-45 - Rotates 45 Degrees.
  • mdi-rotate-90 - Rotates 90 Degrees.
  • mdi-rotate-135 - Rotates 135 Degrees.
  • mdi-rotate-180 - Rotates 180 Degrees.
  • mdi-rotate-225 - Rotates 225 Degrees.
  • mdi-rotate-270 - Rotates 270 Degrees.
  • mdi-rotate-315 - Rotates 315 Degrees.
<span class="mdi mdi-account mdi-rotate-45"></span>

Flip

  • mdi-flip-h - Flip horizontal.
  • mdi-flip-v - Flip vertical.
<span class="mdi mdi-account mdi-flip-h"></span>

Spin

  • mdi-spin - Spinning icon.
<span class="mdi mdi-loading mdi-spin">Processing</span>

Sets of Icons

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

Accessibility

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.

Decoration Icons

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="mdi mdi-bookmark" aria-hidden> Bookmark Item

File Descriptions

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

The above files are also on the CDN: View Latest.

Build Webfont

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

# Extract https://github.com/Templarian/MaterialDesign-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