material-icons-react


NOTE: Version 1.0.4 release

* Demo app updated
* Fix for #28

NOTE: Version 1.0.3 release

* Demo app added
* Fix for #1
* Fix for #11
* Fix for #12
* Fix for #13
* Passing in className prop will replace the default icon styles, defaultColor and inactive styles. Own styles for these should be provided if className prop is defined.

Introduction

This package provides a convenient react component for using Google's Material Icons in your react application.

Features

* Follows Material design guidelines
* Highly customizable
* Supports Material UI color palette off the shelf.

Usage

Import module using the following statement.

``
import MaterialIcon, {colorPalette} from 'material-icons-react';
`

1. Rendering an icon is straightforward.

`


`
2. Change the icon size by using the size property.

`


`
3. Invert the icon by using the invert property.
`

`
4. Make the icon inactivate by using the inactive property.
`

`
5. Change the color of an icon.
* Using Material UI color palette.
`


`
* Using a custom color.
`

`

Showing a preloader until the icon is rendered(For slow connections)

1. CSS

`
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #921515;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
`

2. Preloader element

`
let loader =


`

3. Icon

`

``

Icon size matrix

| Alias | Size |
|-------|-----:|
| tiny | 18px |
| small | 24px |
| medium| 36px |
| large | 48px |

Contributions

Please feel free to create PR for any improvements and contributions.

License

MIT