Geek Answers Handbook

Polymer and paper icons are not displayed.

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

<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 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 are not displayed, as shown here.

enter image description here

+6
source share
3 answers

Update: See this working demo.

You need to import paper-icon-button , iron-icon and image-icons.html , either globally or into this specific 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 iron-icon and other elements. If you are using conversation, do it.

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

find the bower installation command for other elements from the Polymer Elements Catalog

+7
source

The badge with iron badges is an artifact of the Polymer starter set, which includes the my-icons.html file. This file is identically named one of the low iron icon files. naturally, he redefines the one that we really want.

Renaming my-icons.html to anythingElse-icons.html or to my-icons.html.buggy instantly makes iron icons available. Woohoo.

+6
source

It looks like with Polymer 2.0.1 ,

The paper button does not contain a default icon.

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 the icons from the default set, enable PolymerElements / iron-icons / iron-icons.html and use the icon attribute to indicate which icon from the installed icon to use.

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

0
source

More articles:


All Articles