Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@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 the
data-toggle-on
and data-toggle-off
attributes to the mdc-icon-button
element. Then instantiate an MDCIconButtonToggle
on the root element.
<button id="add-to-favorites"
class="mdc-icon-button material-icons"
aria-label="Add to favorites"
aria-hidden="true"
aria-pressed="false"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
var toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));
Note the use of data-toggle-*
properties in the above examples. When an MDCIconButtonToggle
instance is toggled, it looks at these data attributes to determine how to update the element. This is what
allows MDCIconButtonToggle to be so flexible. The data-toggle-on-*
properties will be used when the is
MDCIconButtonToggle is toggled on, and vice versa for data-toggle-off-*
.
Attribute | Description |
---|---|
data-toggle-<TOGGLE STATE>-label | The value to apply to the element's "aria-label" attribute. |
data-toggle-<TOGGLE STATE>-content | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead. |
data-toggle-<TOGGLE STATE>-class | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for content apply here as well. |
The icon button toggle can be used with other font libraries such as Font Awesome that use an inner icon element.
<button id="star-this-item"
class="mdc-icon-button"
aria-label="Unstar this item"
aria-hidden="true"
aria-pressed="true"
data-toggle-on-class="fa-star"
data-toggle-on-label="Unstar this item"
data-toggle-off-class="fa-star-o"
data-toggle-off-label="Star this item"><i class="fa fa-2x fa-star"></i></button>
The icon button can be used with a standard icon library such as Material Icons or Font Awesome, or with an svg
.
The icon button toggle should only be used with an standard icon library. We recommend you use
Material Icons from Google Fonts.
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. |
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 MethodsProperty | 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, or the inner icon element. |
removeClass(className: string) => void | Removes a class from the root element, or the inner icon element. |
setText(text: string) => void | Sets the text content of the root element, or the inner icon element. |
getAttr(name: string) => string | Returns the value of the attribute name on the root element. Can also return null , similar to getAttribute() . |
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 567,504 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.