Newly Paranoid Maintainers
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


3.0.0-pre.21 • Public • Published

Build status

Demo and API docs


Material design: Icon toggles

paper-icon-button is a button with an image placed at the center. When the user touches the button, a ripple effect emanates from the center of the button.

paper-icon-button does not include a default icon set. To use icons from the default set, include PolymerElements/iron-icons/iron-icons.html, and use the icon attribute to specify which icon from the icon set to use.

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-icon-button icon="star"></paper-icon-button>

See iron-iconset for more information about how to use a custom icon set.


<link href="path/to/iron-icons/iron-icons.html" rel="import">
<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button src="star.png"></paper-icon-button>

To use paper-icon-button as a link, wrap it in an anchor tag. Since paper-icon-button will already receive focus, you may want to prevent the anchor tag from receiving focus as well by setting its tabindex to -1.

<a href="" tabindex="-1">
  <paper-icon-button icon="polymer"></paper-icon-button>


Style the button with CSS as you would a normal DOM element. If you are using the icons provided by iron-icons, they will inherit the foreground color of the button.

/* make a red "favorite" button */
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>

By default, the ripple is the same color as the foreground at 25% opacity. You may customize the color using the --paper-icon-button-ink-color custom property.

The following custom properties and mixins are available for styling:

Custom property Description Default
--paper-icon-button-disabled-text The color of the disabled button --disabled-text-color
--paper-icon-button-ink-color Selected/focus ripple color --primary-text-color
--paper-icon-button Mixin for a button {}
--paper-icon-button-disabled Mixin for a disabled button {}
--paper-icon-button-hover Mixin for button on hover {}


npm i @polymer/paper-icon-button

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability