Skip to content

Popular Icons library combined and compatible with Material UI

Notifications You must be signed in to change notification settings

SamEdwards-1/mui-icons

Repository files navigation

Mui Icons

npm

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.

Installation

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

Usage

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;

Libraries Included

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

Configuration

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.

Known Issues

  • 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.

Final Notes

This package is based on the excelent react-icons package.

Licence

MIT

  • Icons are taken from the other projects so please check each project licences accordingly.

About

Popular Icons library combined and compatible with Material UI

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%