Material Design Icons for React/Preact packaged as single components
New v9.4.0 released: See CHANGELOG.md
Support for Preact is available via the
The
The name translates to PascalCase followed by the suffix
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
To change the color on hover you can just use your own class and plain CSS.
You can also add default styling via the
New v9.4.0 released: See CHANGELOG.md
Installation
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
.
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
.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';
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;
}