Getting Started with the Webfont

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

npm install @mdi/font

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

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>.

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

• 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>

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

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

• mdi-spin - Spinning icon.

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

<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>

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

• 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.

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