material-ui-toggle-icon

This project provides a toggle icon for Material-UI.

If you want to try the component yourself instead of watching a gif, head over to the styleguide for a live demo!

Installation

npm i --save material-ui-toggle-icon

Usage

The component takes two icons and a boolean that tells it whether to display the onIcon or the offIcon. When on is changed, the icon is switched with a transition.

import ToggleIcon from "material-ui-toggle-icon";
import IconButton from "@material-ui/core/IconButton";
import Visibility from "@material-ui/icons/Visibility";
import VisibilityOff from "@material-ui/icons/VisibilityOff";

export default class ToggleIconButton extends Component {
  state = { on: false };

  render() {
    <IconButton onClick={() => setState((state) => ({ on: !state.on }))}>
      <ToggleIcon
        on={state.on}
        onIcon={<Visibility />}
        offIcon={<VisibilityOff />}
      />
    </IconButton>;
  }
}

Properties

Name	Type	Default	Description
offIcon*	element		The icon to be displayed if the on prop is set to false.
onIcon*	element		The icon to be displayed if the on prop is set to true.
on*	bool		Controls whether the onIcon or the offIcon is displayed.
style	object		Override the inline-styles of the root element.

* required property

License

The files included in this repository are licensed under the MIT license.