Material Design Icons (npm)

Material Design Icons is a collection of icons designed under the guidelines of Material Design. This collection includes over 4,500 icons, each designed on a 24x24 grid with a consistent visual style. The icons are available in several formats, including PNG, SVG, and icon font.

Installation

The easiest way to install the Material Design Icons npm package is through npm:

npm install @mdi/font

Usage

Once installed, you can import the Material Design Icons CSS file into your project like so:

@import '~@mdi/font/css/materialdesignicons.css';

Then, you can use the icons in your HTML like this:

<i class="mdi mdi-account"></i>

Alternatively, you can use the icon font directly in your CSS like so:

.my-icon {
  font-family: 'Material Design Icons';
  content: "\F447";
}

Customization

Material Design Icons offers several customization options, such as adjusting the icon size, color, and style. These options can be implemented using CSS. For example:

/* Increase icon size to 32px */
i.mdi {
  font-size: 32px;
}

/* Change icon color to blue */
i.mdi {
  color: blue;
}

/* Change icon style to outlined */
i.mdi {
  border: 2px solid black;
  border-radius: 50%;
}

Conclusion

Material Design Icons is a versatile and comprehensive icon library that can be easily integrated into your web projects. With its consistent visual style and extensive customization options, it's a great choice for any developer looking to enhance their UI design.