Polymer Paper Icon Button

by Online Tutorials Library July 14, 2022

Polymer-Paper icon button

In Polymer.js, paper icon button is an action button which is used to represent a particular action such as settings. It shows a ripple effect when the user touches the button.

These buttons can be used as a link or you can give some styling to the buttons as shown in the following example.

Use the following command to get paper-icon-button and iron-icons in your directory:

paper icon 1

Example

Create an index.html file and add the following code in it to see the use of paper icon button element in Polymer.js.

  <!doctype html>  <html>     <head>        <link rel = ‘import’ href = ‘my-app.html’>     </head>     <body>            <my-app></my-app>     </body>  </html>  

Now, open my-app.html file and include the following code in it.

  <link rel = ‘import’ href = ‘bower_components/polymer/polymer.html’>  <link rel = “import” href=”../bower_components/iron-icons/iron-icons.html”>  <link rel = “import” href=”../bower_components/paper-icon-button/paper-icon-button.html”>  <dom-module id = ‘my-app’>     <template>        <h3>Paper-Icon-Button Example </h3>        <paper-icon-button icon = “settings” ></paper-icon-button>settings        <br>        <paper-icon-button icon = “warning” style = “color: red;” ></paper-icon-button>warning        <br>        <paper-icon-button icon = “content-cut” ></paper-icon-button>content-cut        <br>        <paper-icon-button icon = “dashboard” ></paper-icon-button>dashboard        <br>        <paper-icon-button icon = “flight-takeoff” ></paper-icon-button>flight-takeoff        <br>     </template>       <script>        Polymer ({           is: ‘my-app’,           ready: function() {              this.async(function() {                       });           }        });     </script>  </dom-module>  

Output:

paper icon 2

Next TopicPaper Fab

Polymer Paper Icon Button

Polymer-Paper icon button

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like