menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • IconButton
    • disabled true/false
      Is the icon disabled
    • data-toggle-on-content true/false
      icon for on state
    • data-toggle-off-content true/false
      icon for off state
    • data-toggle-on-label true/false
      label for on state
    • data-toggle-off-label true/false
      label for off state
Sample code
import {h, Component} from 'preact';
import IconToggle from 'preact-material-components/IconToggle';
import 'preact-material-components/IconToggle/style.css';

export default class IconTogglePage extends Component {
  render(){
    const toggleOnIcon = {
      content: "favorite",
      label: "Remove From Favorites"
    };
    const toggleOffIcon = {
      content: "favorite_border",
      label: "Add to Favorites"
    };
    return (
      <div>
        <IconButton
          role="button"
          tabindex="0"
          aria-pressed="false"
          aria-label="Add to favorites"
          data-toggle-on-content='favorite'
          data-toggle-off-content='favorite_border'>
          favorite_border
        </IconButton>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-icon-button, you can refer to its documentation here.
Demo