React Icon Button

A React version of an MDC Icon Button.

Installation

``
npm install @material/react-icon-button
`

Usage

$3

with Sass:
`js
import '@material/react-icon-button/index.scss';
`

with CSS:
`js
import '@material/react-icon-button/dist/icon-button.css';
`

$3

`js
import React from 'react';
import IconButton from '@material/react-icon-button';
import MaterialIcon from '@material/react-material-icon';

class MyApp extends React.Component {
render() {
return (



);
}
}
`

You can use any other icon here such as Font Awesome, which is documented more in detail here. If you're using Google Font's Material Icons, we recommend using our Material Icon Component as shown in the example above.

Variants

$3

If you need to use this component as an Icon Button Toggle, please read this documentation. The following is an example using the component as children of . One component with the isOn prop, and one without.

`js
import React from 'react';
import IconButton, {IconToggle} from '@material/react-icon-button';
import MaterialIcon from '@material/react-material-icon';

class MyApp extends React.Component {
render() {
return (








);
}
}
``

Props

Prop Name | Type | Description
--- | --- | ---
children | Element | Icon element or text to be displayed within root element.
className | String | Classes to be applied to the root element.
disabled | Boolean | Disables button if true.
isLink | Boolean | Changes root element to an anchor tag (default button).
onClick | Function | Click event handler. Event is passed as an argument

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins