mdi-react
v9.4.0
Published
Material Design Icons for React
Downloads
75,627
Readme
mdi-react
Material Design Icons for React/Preact packaged as single components
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;
}