React - Material Design Icons
Material Design Icons can be used in React with a custom component or with the one provided in this module.
View the Demo
``
npm install @mdi/react
`
Usage
The example below uses the @mdi/js
package which contains all the MDI icon's path data.
`
javascript
import React, { Component } from 'react';
import Icon from '@mdi/react';
import { mdiAccount } from '@mdi/js';
class App extends Component {
render() {
return (
size={1}
horizontal
vertical
rotate={90}
color="red"/>
);
}
}
`
Stack Usage
To layer nest them inside of the component.
`
javascript
import React, { Component } from 'react';
import Icon, { Stack } from '@mdi/react';
import { mdiAccount, mdiBlockHelper } from '@mdi/js';
class App extends Component {
render() {
return (
color="red"/>
);
}
}
`
Props
$3
| Prop | PropTypes | Default | Details |
|-------------|----------------|----------|---------|
| title | string, null | null
| A11y {title} |
| description | string, null | null
| A11y {desc} |
| path | string | required | SVG path data. Usually from @mdi/js |
| size | number, string | null
| {size * 1.5}rem
, 1em
, 48px
|
| horizontal | bool | false
| Flip Horizontal |
| vertical | bool | false
| Flip Vertical |
| rotate | number | 0
| degrees 0
to 360
|
| color | string | null
| rgb()
/ rgba()
/ #000
|
| spin | bool, number | false
| true
= 2s
, -2
counterclockwise, {spin}s
|
> Note: Additional props will be applied to the