React Icon Button

A React version of an MDC Icon Button.

Installation

npm install @material/react-icon-button

Usage

Styles

with Sass:

import '@material/react-icon-button/index.scss';

with CSS:

import '@material/react-icon-button/dist/icon-button.css';

JSX Structure

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 (
      <IconButton>
        <MaterialIcon icon='favorite' />
      </IconButton>
    );
  }
}

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

Icon Button Toggle

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

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 (
      <IconButton>
        <IconToggle isOn>
          <MaterialIcon icon='favorite' />
        </IconToggle>
        <IconToggle>
          <MaterialIcon icon='favorite_border' />
        </IconToggle>
      </IconButton>      
    );
  }
}

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