Material Design Icons for React
npm install mdi-reactNew v9.4.0 released: See CHANGELOG.md
``bash`
npm install mdi-reactor if you use Yarn
yarn add mdi-react
Support for Preact is available via the mdi-preact package. mdi-preact
The 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:
`javascript
import AlertIcon from 'mdi-react/AlertIcon';
import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
const MyComponent = () => {
return (
To change the color on hover you can just use your own class and plain CSS.
`css
.some-class:hover {
fill: red;
}
`You can also add default styling via the
mdi-icon class.`css
.mdi-icon {
background-color: green;
}
``