Effortlessly include icons from the most popular icon libraries in you Material-UI project. This project wraps each icon with Mui's SvgIcon component and exports them using ES6 imports, so they are easy to import and use, and will match your theme.
Yes, you guessed it:
npm i -S mui-icons
This package has material-ui
as a peer dependency, so remember to also have that in your node_modules
.
npm i -S material-ui
Simply import the icons you want and add them to IconButtons or anywhere else.
import React from 'react';
import IconButton from 'material-ui/IconButton';
import Pizza from 'mui-icons/ionicons/pizza';
const PizzaButton = () => (
<IconButton>
<Pizza />
<IconButton>
);
export default PizzaButton;
Name | Folder Name | Home Page | Number if Icons |
---|---|---|---|
Community Material Design Icons | cmdi |
https://materialdesignicons.com/ | 1956 |
Evil Icons | evilicons |
http://evil-icons.io/ | 70 |
FontAwesome | fontawesome |
http://fontawesome.io/ | 694 |
Ionicons | ionicons |
http://ionicons.com/ | 859 |
Material Design Icons | mdi |
https://material.io/icons/ | 959 |
Github Octicons | octicons |
https://octicons.github.com/ | 176 |
Typicons | typicons |
http://www.typicons.com/ | 336 |
Any props added to an Icon will be forwarded to Mui's SvgIcon element (except for children
, which will be the paths of the icon you want). Check the Mui docs to see it's props.
- Ionicons uses style on some icons, which react doesn't seem to like.
svgscaler
breaks IonIcons and EvilIcons. Using style to reset scale and position.
This package is based on the excelent react-icons package.
MIT
- Icons are taken from the other projects so please check each project licences accordingly.