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

Question

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:
(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
Remove the existing bower_components folder.
rm -rf bower_components
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
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",
...
}

Answer 1

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

Answer 2

iron-icons is a utility import that includes the definition for the
iron-icon element, iron-iconset-svg element, as well as an import
for the default icon set.
This means that iron-icons is directly dependent on both iron-icon and iron-iconset-svg. And both iron-icon and iron-iconset-svg element depends on iron-meta.
When you update iron-icons to the latest version, these elements iron-icon, iron-iconset-svg and iron-meta might not get updated since you will get all these components by default. So, updating iron-meta is one of the solution.
Also, when you install or update element in polymer you will see messages like:
Unable to find a suitable version for iron-icons, please choose one by
typing one of the numbers below:
Always choose the suitable or latest version depending on other element you have.
When finished updating or installing you will see a note like:
Please note that,
iron-iconset-svg#a47e824859 depends on iron-meta#2.0-preview which resolved to iron-meta#7404b31da3
iron-icon#1.0.13, iron-icon#1.0.13, iron-icon#1.0.13, iron-iconset-svg#1.1.2, iron-iconset-svg#1.1.2 depends on iron-meta#^1.0.0 which resolved to iron-meta#1.1.3
iron-icon#2.0.0, iron-iconset-svg#2.0.0 depends on iron-meta#1 - 2 which resolved to iron-meta#2.0.2
Make sure you read this and install/update dependencies required.
Note: In my case I had to update iron-selector as well since I was using iron-icon inside the iron-selector.