@material/icon-button
Advanced tools
Icon buttons allow users to take actions, and make choices, with a single tap.
npm install @material/icon-button
<button class="mdc-icon-button material-icons">favorite</button>
Note: The MDC Icon Button can be used with
<button>and<a>tags.
Note: IE11 will not center the icon properly if there is a newline or space after the material icon text.
@import "@material/icon-button/mdc-icon-button";
The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element.
See MDC Ripple for details.
import {MDCRipple} from '@material/ripple';
const iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;
See Importing the JS component for more information on how to import JavaScript.
The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add
both icons as child elements and place the mdc-icon-button__icon--on class on the icon that represents the on element.
If the button should be initialized in the "on" state, then add the mdc-icon-button--on class to the parent button.
Then instantiate an MDCIconButtonToggle on the root element.
<button id="add-to-favorites"
class="mdc-icon-button"
aria-label="Add to favorites"
aria-hidden="true"
aria-pressed="false">
<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
var toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));
The icon button toggle can be used with SVGs.
<button id="star-this-item"
class="mdc-icon-button mdc-icon-button--on"
aria-label="Unstar this item"
aria-hidden="true"
aria-pressed="true">
<svg class="mdc-icon-button__icon">
...
</svg>
<svg class="mdc-icon-button__icon mdc-icon-button__icon--on">
...
</svg>
</button>
The icon button toggle can be used with img tags.
<button id="star-this-item"
class="mdc-icon-button mdc-icon-button--on"
aria-label="Unstar this item"
aria-hidden="true"
aria-pressed="true">
<img src="" class="mdc-icon-button__icon"/>
<img src="" class="mdc-icon-button__icon mdc-icon-button__icon--on"/>
</button>
We recommend using Material Icons from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
However, you can also use SVG, Font Awesome, or any other icon library you wish.
To disable an icon, add the disabled attribute directly to the <button> element. Icon buttons that use the <a> tag
cannot be disabled. Disabled icon buttons cannot be interacted with and have no visual interaction effect.
<button class="mdc-icon-button material-icons" disabled>favorite</button>
| CSS Class | Description |
|---|---|
mdc-icon-button | Mandatory. |
mdc-icon-button--on | This class is applied to the root element and is used to indicate if the icon button toggle is in the "on" state. |
mdc-icon-button__icon | This class is applied to each icon element for the icon button toggle. |
mdc-icon-button__icon--on | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the "on" icon. |
To customize an icon button's color and properties, you can use the following mixins.
| Mixin | Description |
|---|---|
mdc-icon-button-size($width, $height, $padding) | Sets the width, height, font-size and padding for the icon and ripple. $height is optional and defaults to $width. $padding is optional and defaults to max($width, $height)/2. font-size is set to max($width, $height). |
mdc-icon-button-ink-color($color) | Sets the font color and the ripple color to the provided color value. |
MDCIconButtonToggle Properties and Methods| Property | Value Type | Description |
|---|---|---|
on | Boolean | Sets the toggle state to the provided isOn value. |
| Event Name | Event Data Structure | Description |
|---|---|---|
MDCIconButtonToggle:change | {"detail": {"isOn": boolean}} | Emits when the icon is toggled. |
If you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCIconButtonToggleAdapter| Method Signature | Description |
|---|---|
addClass(className: string) => void | Adds a class to the root element. |
removeClass(className: string) => void | Removes a class from the root element. |
setAttr(name: string, value: string) => void | Sets the attribute name to value on the root element. |
notifyChange(evtData: {isOn: boolean}) => void | Broadcasts a change notification, passing along the evtData to the environment's event handling system. In our vanilla implementation, Custom Events are used for this. |
MDCIconButtonToggleFoundation| Method Signature | Description |
|---|---|
handleClick() | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes. |
FAQs
The Material Components for the web icon button component
The npm package @material/icon-button receives a total of 684,917 weekly downloads. As such, @material/icon-button popularity was classified as popular.
We found that @material/icon-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.