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);

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);

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

// 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} />