# @npm-polymer/paper-icon-button

> A material design icon button

Latest version **1.1.6** (published 2017-06-03) · http://polymer.github.io/LICENSE.txt license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @npm-polymer/paper-icon-button
pnpm add @npm-polymer/paper-icon-button
yarn add @npm-polymer/paper-icon-button
bun add @npm-polymer/paper-icon-button
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2017-06-03 |
| First published | 2017-06-03 |
| Weekly downloads | 0 |
| License | http://polymer.github.io/LICENSE.txt |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 42 |
| Maintainers | npm-polymer |
| Keywords | web-components, polymer, button, icon, control |

## Links

- npm: https://www.npmjs.com/package/@npm-polymer/paper-icon-button
- Repository: https://github.com/PolymerElements/paper-icon-button
- Homepage: https://github.com/PolymerElements/paper-icon-button#readme
- Issues: https://github.com/PolymerElements/paper-icon-button/issues
- npm.io page: https://npm.io/package/@npm-polymer/paper-icon-button

## Dependencies (4)

- [@npm-polymer/polymer](https://npm.io/package/@npm-polymer/polymer.md) 2.0.1
- [@npm-polymer/iron-icon](https://npm.io/package/@npm-polymer/iron-icon.md) 1.0.13
- [@npm-polymer/paper-styles](https://npm.io/package/@npm-polymer/paper-styles.md) 1.3.1
- [@npm-polymer/paper-behaviors](https://npm.io/package/@npm-polymer/paper-behaviors.md) 1.0.13

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2017-06-03

## README

<!---

This README is automatically generated from the comments in these files:
paper-icon-button-light.html  paper-icon-button.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->

[![Build status](https://travis-ci.org/PolymerElements/paper-icon-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-icon-button)

_[Demo and API docs](https://elements.polymer-project.org/elements/paper-icon-button)_


##&lt;paper-icon-button&gt;

Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)

`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` includes a default icon set.  Use `icon` to specify which icon
from the icon set to use.

<!---
```html
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="paper-icon-button.html">
    <link rel="import" href="../iron-icons/iron-icons.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<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`](https://github.com/PolymerElements/iron-iconset) for more information about
how to use a custom icon set.

Example:

```html
<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.

```html
<a href="https://www.polymer-project.org" tabindex="-1">
  <paper-icon-button icon="polymer"></paper-icon-button>
</a>
```

### Styling

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.

```html
/* 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 | `{}` |



<!-- No docs for <paper-icon-button-light> found. -->

---
_Source: https://npm.io/package/@npm-polymer/paper-icon-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._