CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mdi--font

Webfont distribution for Material Design Icons providing CSS and SCSS integration for thousands of icons.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

css-usage.mddocs/

CSS Icon Usage

Direct CSS class-based icon integration for HTML elements, providing immediate access to all Material Design icons through predefined CSS classes.

Capabilities

Base Icon Class

The foundational class required for all Material Design icons, providing font family, sizing, and rendering optimizations.

/**
 * Base class required for all Material Design icons
 * Sets font family, display properties, and rendering optimizations
 */
.mdi {
  display: inline-block;
  font-family: "Material Design Icons";
  font-size: 24px;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Alternative base class for icons within sets
 */
.mdi-set {
  display: inline-block;
  font-family: "Material Design Icons";
  font-size: 24px;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Usage Examples:

<!-- Basic icon structure -->
<i class="mdi mdi-account"></i>
<span class="mdi mdi-home"></span>

<!-- Icons within icon sets -->
<div class="mdi-set mdi-email"></div>

Individual Icon Classes

Each of the 7,448 Material Design icons has its own CSS class that defines the Unicode character to display.

/**
 * Individual icon classes following the pattern .mdi-{icon-name}
 * Each class sets the content property to the icon's Unicode character
 */
.mdi-account::before { content: "\\F0004"; }
.mdi-home::before { content: "\\F02DC"; }
.mdi-settings::before { content: "\\F0493"; }
.mdi-email::before { content: "\\F01EE"; }
.mdi-phone::before { content: "\\F03F2"; }
.mdi-refresh::before { content: "\\F0450"; }
.mdi-loading::before { content: "\\F0772"; }
.mdi-check::before { content: "\\F012C"; }
.mdi-close::before { content: "\\F0156"; }
.mdi-menu::before { content: "\\F0349"; }
.mdi-search::before { content: "\\F049F"; }
.mdi-star::before { content: "\\F04CE"; }
.mdi-heart::before { content: "\\F02D1"; }
.mdi-download::before { content: "\\F01DA"; }
.mdi-upload::before { content: "\\F054C"; }
.mdi-delete::before { content: "\\F01B4"; }
.mdi-edit::before { content: "\\F03EB"; }
.mdi-copy::before { content: "\\F018F"; }
.mdi-folder::before { content: "\\F024B"; }
.mdi-file::before { content: "\\F0214"; }
/* ... 7,428 more icon classes available */

Usage Examples:

<!-- Common icons -->
<i class="mdi mdi-account"></i>
<i class="mdi mdi-home"></i>
<i class="mdi mdi-settings"></i>

<!-- Action icons -->
<button><i class="mdi mdi-check"></i> Save</button>
<button><i class="mdi mdi-close"></i> Cancel</button>
<button><i class="mdi mdi-delete"></i> Delete</button>

<!-- Navigation icons -->
<nav>
  <a href="/"><i class="mdi mdi-home"></i> Home</a>
  <a href="/search"><i class="mdi mdi-search"></i> Search</a>
  <a href="/menu"><i class="mdi mdi-menu"></i> Menu</a>
</nav>

<!-- File operation icons -->
<div class="file-actions">
  <i class="mdi mdi-download"></i>
  <i class="mdi mdi-upload"></i>
  <i class="mdi mdi-copy"></i>
  <i class="mdi mdi-edit"></i>
</div>

Font-Face Declaration

The font-face declaration that loads the Material Design Icons webfont files in multiple formats for browser compatibility.

/**
 * Font-face declaration loading Material Design Icons webfont
 * Includes multiple formats for broad browser compatibility
 */
@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.eot?v=7.4.47");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=7.4.47") format("embedded-opentype"),
       url("../fonts/materialdesignicons-webfont.woff2?v=7.4.47") format("woff2"),
       url("../fonts/materialdesignicons-webfont.woff?v=7.4.47") format("woff"),
       url("../fonts/materialdesignicons-webfont.ttf?v=7.4.47") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Browser Support:

  • WOFF2: Modern browsers (Chrome 36+, Firefox 39+, Safari 12+)
  • WOFF: Wide browser support (IE 9+, all modern browsers)
  • TTF: Universal fallback support
  • EOT: Internet Explorer compatibility

CSS Import Methods

Different ways to include the Material Design Icons CSS in your project.

/* Method 1: CSS @import */
@import url('path/to/materialdesignicons.css');

/* Method 2: CSS @import with node_modules */
@import url('~@mdi/font/css/materialdesignicons.css');

/* Method 3: CSS @import minified version */
@import url('~@mdi/font/css/materialdesignicons.min.css');

HTML Link Method:

<!-- Development version -->
<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">

<!-- Production minified version -->
<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.min.css">

<!-- CDN usage (replace with actual CDN URL) -->
<link rel="stylesheet" href="https://cdn.example.com/@mdi/font@7.4.47/css/materialdesignicons.min.css">

Usage Examples:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">
</head>
<body>
  <h1><i class="mdi mdi-home"></i> Welcome</h1>
  <p>Click <i class="mdi mdi-download"></i> to download files.</p>
  
  <div class="toolbar">
    <button><i class="mdi mdi-content-save"></i></button>
    <button><i class="mdi mdi-content-copy"></i></button>
    <button><i class="mdi mdi-delete"></i></button>
  </div>
</body>
</html>

Integration with Build Tools

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'fonts/',
          },
        },
      },
    ],
  },
};

Vite

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@mdi/font/scss/materialdesignicons.scss";`
      }
    }
  }
};

Parcel

Parcel automatically handles font files and CSS imports:

/* In your CSS file */
@import "@mdi/font/css/materialdesignicons.css";

docs

css-usage.md

index.md

scss-usage.md

theming-transforms.md

tile.json