This is a fork of the mdi-react package and includes an accessibility fix for svg elements - see below for more info.

@pingux/mdi-react

Material Design Icons for React packaged as single components

Installation

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

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 @pingux/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 '@pingux/mdi-react/AlertIcon';
import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon className="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;
}

Accessibility

Icons get translated to SVG elements in the DOM. In order for SVG elements to be accessible, the SVG element needs a <title> element with an id and the SVG element should have an aria-labelledby attribute which should be set to the id of the <title>. In order to do this, a title prop object can be passed in to the Icon.

When passing this object in, the id is optional. If it's not provided, one will be generated for you.

import SearchIcon from '@pingux/mdi-react/SearchIcon';

const MyComponent = () => {
  const title = {
    id: 'title-id', // Optional, otherwise a uuid will be used
    name: 'Icon Title',
  };

  return <SearchIcon title={title} />;
};

In the DOM, this Icon would get translated to this:

<svg class="mdi-icon css-195mvoi e146bxl90" aria-labelledby="title-id" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
  <title id="title-id">
    Icon Title
  </title>
  <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
</svg>