mdi-react

Material Design Icons for React packaged as single components

Installation

npm install mdi-react
# or if you use Yarn
yarn add mdi-react

The version number of mdi-react is in sync with the original font.

Usage

Just search for an icon on materialdesignicons.com and look for its name.
The name translates to PascalCase followed by the suffix Icon in mdi-react.

For example the icons named alert and alert-circle:

import AlertIcon from 'mdi-react/AlertIcon';
import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
// if your build tools support es module syntax and tree-shaking (like webpack2 and above),
// you can also import like this:
// import { AlertIcon, AlertCircleIcon } from 'mdi-react';

const MyComponent = () => {
  return (
    <div>
      <AlertIcon />
      <AlertCircleIcon className="some-class" />
    </div>
  );
};

The icons get a class named mdi-icon attached for styling. You can also attach own additional classes with the className property.