polymerpolymer-2.xiron-elements

How to get <iron-icons> to work in Polymer 2.x


Narrow Question

By troubleshooting, I think I have narrowed my "larger problem" down to the following question. (But I could be wrong.):

How do I properly download the latest version of <iron-icons> to my local machine?

By "latest version," I mean the version that is imported via the following:

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

The above version of importing <iron-icons> works on my demo here.

However, when I do either of the following:

bower install --save PolymerElements/iron-icons

bower update --save

And try to import on my local server like this:

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

it fails silently and I see no icons at all. But I do see extra space where the icons are supposed to render.

Bigger Question (the real problem I'm trying to solve)

I am trying to get my <iron-icons> to render properly in the browser.

What I expect to see

I expect to see a two <iron-icon> elements like this:

enter image description here

(anchored in between other test elements: Hello World and <img>)

What I actually see

No icons at all. But white space where they should render.

Steps to reproduce

Run

bower install --save PolymerElements/iron-icons

or, if <iron-icons> is already installed:

bower update --save

then

polyserve

or

polymer serve

Version

I believe I am using v2.0.1 of <iron-icons>. Here is the entire contents of the bower.json file.

bower.json
"iron-icons": "PolymerElements/iron-icons#^2.0.1",

Configuration

OS: macOS Sierra 10.12.6
Hardware: MacBook Air
Browser: Chrome Version 60.0.3112.113 (Official Build) (64-bit)

Demo

Here is my Plunker demo.

Code

The following code does render <iron-icons> as expected:

http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">

<dom-module id="demo-el">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class DemoEl extends Polymer.Element {
      static get is() {
        return 'demo-el'
      }

      constructor() {
        super();
      }

    }
    customElements.define(DemoEl.is, DemoEl);
  </script>
</dom-module>

The following code does NOT render <iron-icons> as expected (served locally):

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">

<dom-module id="app-main">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class AppMain extends Polymer.Element {
      static get is() {
        return 'app-main'
      }

      constructor() {
        super();
      }

    }
    customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

However, the above code does render <iron-icons> as expected when I do a direct substitution of:

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

for

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

Edit

By comparing the text of the imported files using the CDN

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

and local imports:

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

I discovered there is a discrepancy in the imported version of the iron-iconset-svg.html file. My bower.json file says the dependent version is "iron-iconset-svg": "1 - 2" or "iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0" but the bower.json file here says the dependent version is "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"

So, now the question appears to reduce to how do I get the local version of iron-icons.html to import the same version of iron-iconset-svg.html as the online CDN import version.

Edit 2

The problem persists when I just copy the iron-iconset-svg.html file from the CDN and paste it into my local file system. So, apparently something else is going on too.

Edit 3

I followed the instructions here for upgrading to Polymer 2.0:

https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies
  1. Remove the existing bower_components folder.
rm -rf bower_components
  1. Update the Polymer version in bower.json to the latest versions.
Component            | Version
---------------------|--------
Polymer              | ^2.0.0
webcomponentsjs      | ^1.0.0
web-component-tester | ^6.0.0
Polymer elements     | ^2.0.0
  1. Install the new dependencies.
bower install

This did not solve the problem. However I could not update Polymer elements to ^2.0.0

bower.json
"dependencies" : {
  ...
  "polymer-elements" : "^2.0.0",
  ...
}

caused an error and so did:

bower.json
"dependencies" : {
  ...
  "polymerelements" : "^2.0.0",
  ...
}

and so did:

bower.json
"dependencies" : {
  ...
  "PolymerElements" : "^2.0.0",
  ...
}

Solution

  • The solution proposed by @Ofisora in the comments works for me—update iron-selector and iron-meta:

    bower install --save PolymerElements/iron-meta
    bower install --save PolymerElements/iron-selector