CODEWITHSUNDEEP
javascriptcsshtmlpolymerpolymer-1.0
Arunabh Das
Arunabh Das

Reputation: 14382

Polymer icon and paper icons not showing up

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

enter image description here

Upvotes: 7

Views: 5945

Answers (3)

burak
burak

Reputation: 4064

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

Upvotes: 0

krasicki
krasicki

Reputation: 79

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.

Upvotes: 6

SG_
SG_

Reputation: 1336

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

Upvotes: 8

Related Questions