Material Design Icons for React/Preact packaged as single components

New v3.3.0 released: See CHANGELOG.md

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

Support for Preact is available via the mdi-preact package.
The mdi-preact package supports class as alternative to className.

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.
Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

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 webpack 2 and above)
import { AlertIcon, AlertCircleIcon } from 'mdi-react';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is #000 */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon className="some-class" size={16} />
    </div>
  );
};

You can also add default styling via the mdi-icon class.

.mdi-icon {
  /* Set this to have the color match the current text color */
  fill: currentColor;
  /* Set this to have the icon size match the current font size */
  width: 1em;
  height: 1em;
}