mdi-preact

Material Design Icons for Preact/React packaged as single components

New v9.4.0 released: See CHANGELOG.md

Installation

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

Support for React is available via the mdi-react package.

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-preact.
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-preact/AlertIcon';
import AlertCircleIcon from 'mdi-preact/AlertCircleIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon class="some-class" size={16} />
      {/* This sets the icon size to the current font size */}
      <AlertIcon size="1em" />
    </div>
  );
};

To change the color on hover you can just use your own class and plain CSS.

.some-class:hover {
  fill: red;
}

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

.mdi-icon {
  background-color: green;
}