Polymer icon and paper icons not showing up

Asked 26/12, 2015 at 22:21 Answered 27/9, 2017 at 15:29

I have a polymer 1.x element called input-header and it looks like this

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="input-header">

  <template>

    <style>
      .dropdown-content {
        padding: 0px;
      }
    </style>

    <paper-toolbar>

      <paper-icon-button icon="mail"></paper-icon-button>
      <iron-icon icon="image:transform"></iron-icon>
      <div class="title">Left</div>

      <paper-menu-button horizontal-align="right" vertical-align="top">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <div class="title">Right</div>
      </paper-menu-button>
    </paper-toolbar>

  </template>

  <script>
    Polymer({

      is: 'input-header',

      properties: {

        label: {
          type: String,
          notify: true
        }

      }

    });
  </script>

</dom-module>

I have included it in my index.html as follows :

<body unresolved id="app">

   <input-header label="Left"></input-header>

</body>

But for some reason, the paper-icon or iron-icons don't show up as seen here

Iaea answered 26/12, 2015 at 22:21 Comment(1)

You have to import paper-icon and iron-icon – Halfslip 27/12, 2015 at 7:7

Update : See this working demo

You have to import paper-icon-button, iron-icon and image-icons.html, either globally or in this particular element. Like this

 <!-- import the iron-icon & paper-icon-button custom element -->
 <link rel="import"
  href="path/to/iron-icons/iron-icons.html">

  <!----- this is required for iron-icon image:transform to work ----->
 <link rel="import"
  href="path/to/iron-icons/image-icons.html">
 <!---------------------------------------------->

 <link rel="import"
  href="path/to/paper-icon-button/paper-icon-button.html">
 <link rel="import"
  href="path/to/paper-toolbar/paper-toolbar.html">
 <link rel="import"
  href="path/to/paper-menu-button/paper-menu-button.html">

I assume that you have installed/downloaded the iron-icon and other elements. If you are using bower do this

  bower install --save PolymerElements/iron-icon 
  bower install --save PolymerElements/paper-icon-button

find bower install command for other elements from Polymer Element Catalog

Halfslip answered 27/12, 2015 at 7:11 Comment(1)

It was working till yesterday, now the polymer-elements source http://element-party.xyz/ is blocked by Cross-Origin Resource Sharing policy. – Halfslip 28/12, 2015 at 10:9

The iron-icons bug is an artifact of the Polymer starter kit that includes a file called my-icons.html. This file is identically named as one of the low level iron-icons files. naturally it overrides the one we really want.

Renaming my-icons.html to anythingElse-icons.html or to my-icons.html.buggy will instantly make the iron-icons available. Woohoo.

Mantilla answered 28/10, 2016 at 18:15 Comment(1)

Thank you! This was exactly the issue. – Access 17/10, 2017 at 12:58

It seems also, since Polymer 2.0.1,

paper-icon-button does not include a default icon set.

So, PolymerElements/iron-icons/iron-icons.html should be included separately.

Here is the full explanation:

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.

For More detailed information visit: https://www.webcomponents.org/element/PolymerElements/paper-icon-button

Lm answered 27/9, 2017 at 15:29 Comment(0)

Recommended topics

Hot tags