Package Exports

react-material-iconic-font

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-material-iconic-font) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-material-iconic-font

Material Iconic Font in React components

Install

npm i react-material-iconic-font --save

Peer Dependencies

react - >= 15
react-dom - >= 15
material-design-iconic-font - 2.2.x

Usage

import React from 'react';
import { render } from 'react-dom';
import MaterialIcon from 'react-material-iconic-font';

const AddButton = ({ children, ...props }) => (
    <button type="button" {...props}>
        <MaterialIcon type="plus" /> {children}
    </button>
);

render(<AddButton>Add</AddButton>, document.body);

Using icon "stacks"

import React from 'react';
import { render } from 'react-dom';
import MaterialIcon, { MaterialIconStack } from 'react-material-iconic-font';

const ShareButton = ({ children, ...props }) => (
    <button type="button" {...props}>
        <MaterialIconStack>
            <MaterialIcon type="square-o" stackSize={2} />
            <MaterialIcon type="share" stackSize={1} />
        </MaterialIconStack>
        {children}
    </button>
);

render(<ShareButton>Share</ShareButton>, document.body);

Passing HTML attributes

const AddButton = ({ children, ...props }) => (
    <button type="button" {...props}>
        <MaterialIcon type="plus" data-icon="Add icon" /> {children}
    </button>
);

Optional Properties

// large -> zmdi-hc-lg
<MaterialIcon large />

// large -> zmdi-hc-stack-lg
<MaterialIconStack large></MaterialIconStack>

// size -> zmdi-hc-{x}x
// valid: 2..5
<MaterialIcon size={2} />

// stackSize -> zmdi-hc-stack-{x}x
// valid: 1,2
<MaterialIcon stackSize={2} />

// fixed -> zmdi-hc-fw
<MaterialIcon fixed />

// MaterialIconList -> zmdi-hc-ul + zmdi-hc-li
<MaterialIconList>
    <MaterialIcon />
</MaterialIconList>

// inverse -> zmdi-hc-inverse
<MaterialIcon inverse />

// border -> zmdi-hc-border
<MaterialIcon border />

// border="circle" -> zmdi-hc-border-circle
<MaterialIcon border="circle" />

// pull -> pull-{direction}
// valid: ['left', 'right']
<MaterialIcon pull='left' />

// spin -> zmdi-hc-spin
<MaterialIcon spin />

// flip -> zmdi-hc-flip-{axis}
// valid: ['horizontal', 'vertical']
<MaterialIcon flip='horizontal' />

// rotate -> zmdi-hc-rotate-{degress}
// valid: [90, 180, 270]
<MaterialIcon rotate={90} />

License

MIT