title: How to get <iron-icons> to work in Polymer 2.x
body: <h3>Narrow Question</h3>
  
  <p><em>By troubleshooting, I think I have narrowed my "larger problem" down to the following question. (But I could be wrong.):</em></p>
  
  <p>How do I properly download the latest version of <code>&lt;iron-icons&gt;</code> to my local machine?</p>
  
  <p>By "latest version," I mean the version that is imported via the following:</p>
  
  <pre><code>&lt;base href="//polygit.org/polymer+:master/components/"&gt;
  &lt;link rel="import" href="iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>The above version of importing <code>&lt;iron-icons&gt;</code> <a href="http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview" rel="nofollow noreferrer">works on my demo here.</a></p>
  
  <p>However, when I do either of the following:</p>
  
  <pre><code>bower install --save PolymerElements/iron-icons
  
  bower update --save
  </code></pre>
  
  <p>And try to import on my local server like this:</p>
  
  <pre><code>&lt;link rel="import" href="/bower_components/iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>it fails silently and I see no icons at all. But I do see extra space where the icons are supposed to render.</p>
  
  <h3>Bigger Question (the real problem I'm trying to solve)</h3>
  
  <p>I am trying to get my <code>&lt;iron-icons&gt;</code> to render properly in the browser.</p>
  
  <h3>What I expect to see</h3>
  
  <p>I expect to see a two <code>&lt;iron-icon&gt;</code> elements like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HCN7A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HCN7A.png" alt="enter image description here"></a></p>
  
  <p>(anchored in between other test elements: <code>Hello World</code> and <code>&lt;img&gt;</code>)</p>
  
  <h3>What I actually see</h3>
  
  <p>No icons at all. But white space where they should render.</p>
  
  <h3>Steps to reproduce</h3>
  
  <p>Run</p>
  
  <pre><code>bower install --save PolymerElements/iron-icons
  </code></pre>
  
  <p>or, if <code>&lt;iron-icons&gt;</code> is already installed:</p>
  
  <pre><code>bower update --save
  </code></pre>
  
  <p>then</p>
  
  <pre><code>polyserve
  </code></pre>
  
  <p>or</p>
  
  <pre><code>polymer serve
  </code></pre>
  
  <h3>Version</h3>
  
  <p>I believe I am using v2.0.1 of <code>&lt;iron-icons&gt;</code>. <a href="https://pastebin.com/raw/TT7e5TN8" rel="nofollow noreferrer">Here is the entire contents of the bower.json file.</a></p>
  
  bower.json
  
  <pre><code>"iron-icons": "PolymerElements/iron-icons#^2.0.1",
  </code></pre>
  
  <h3>Configuration</h3>
  
  <p>OS: macOS Sierra 10.12.6
  <br>Hardware: MacBook Air
  <br>Browser: Chrome Version 60.0.3112.113 (Official Build) (64-bit)</p>
  
  <h3>Demo</h3>
  
  <p><a href="http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview" rel="nofollow noreferrer">Here is my Plunker demo.</a></p>
  
  <h3>Code</h3>
  
  <p>The following code does render <code>&lt;iron-icons&gt;</code> as expected:</p>
  
  <a href="http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview</a>
  
  <pre><code>&lt;base href="//polygit.org/polymer+:master/components/"&gt;
  &lt;script src="webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="polymer/polymer-element.html"&gt;
  &lt;link rel="import" href="iron-icons/iron-icons.html"&gt;
  &lt;link rel="import" href="iron-icon/iron-icon.html"&gt;
  
  &lt;dom-module id="demo-el"&gt;
    &lt;template&gt;
  
      Hello world
      &lt;iron-icon icon="add"&gt;&lt;/iron-icon&gt;
      &lt;iron-icon icon="favorite"&gt;&lt;/iron-icon&gt;
      &lt;img src="//lorempixel.com/400/200/" /&gt;
  
    &lt;/template&gt;
    &lt;script&gt;
      class DemoEl extends Polymer.Element {
        static get is() {
          return 'demo-el'
        }
  
        constructor() {
          super();
        }
  
      }
      customElements.define(DemoEl.is, DemoEl);
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>The following code does NOT render <code>&lt;iron-icons&gt;</code> as expected (served locally):</p>
  
  <pre><code>&lt;link rel="import" href="/bower_components/polymer/polymer-element.html"&gt;
  &lt;link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js"&gt;
  &lt;link rel="import" href="/bower_components/iron-icon/iron-icon.html"&gt;
  &lt;link rel="import" href="/bower_components/iron-icons/iron-icons.html"&gt;
  &lt;link rel="import" href="/bower_components/paper-input/paper-input.html"&gt;
  
  &lt;dom-module id="app-main"&gt;
    &lt;template&gt;
  
      Hello world
      &lt;iron-icon icon="add"&gt;&lt;/iron-icon&gt;
      &lt;iron-icon icon="favorite"&gt;&lt;/iron-icon&gt;
      &lt;img src="//lorempixel.com/400/200/" /&gt;
  
    &lt;/template&gt;
    &lt;script&gt;
      class AppMain extends Polymer.Element {
        static get is() {
          return 'app-main'
        }
  
        constructor() {
          super();
        }
  
      }
      customElements.define(AppMain.is, AppMain);
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>However, the above code does render <code>&lt;iron-icons&gt;</code> as expected when I do a direct substitution of:</p>
  
  <pre><code>&lt;base href="//polygit.org/polymer+:master/components/"&gt;
  &lt;link rel="import" href="iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>for</p>
  
  <pre><code>&lt;link rel="import" href="/bower_components/iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>By comparing the text of the imported files using the CDN</p>
  
  <pre><code>&lt;base href="//polygit.org/polymer+:master/components/"&gt;
  &lt;link rel="import" href="iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>and local imports:</p>
  
  <pre><code>&lt;link rel="import" href="/bower_components/iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>I discovered there is a discrepancy in the imported version of the <code>iron-iconset-svg.html</code> file. My bower.json file says the dependent version is <code>"iron-iconset-svg": "1 - 2"</code> or <code>"iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0"</code> but the bower.json file here says the dependent version is <code>"iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"</code></p>
  
  <p>So, now the question appears to reduce to how do I get the local version of <code>iron-icons.html</code> to import the same version of <code>iron-iconset-svg.html</code> as the online CDN import version.</p>
  
  <h2>Edit 2</h2>
  
  <p>The problem persists when I just copy the <code>iron-iconset-svg.html</code> file from the CDN and paste it into my local file system. So, apparently something else is going on too.</p>
  
  <h2>Edit 3</h2>
  
  <p><a href="https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies" rel="nofollow noreferrer">I followed the instructions here for upgrading to Polymer 2.0:</a></p>
  
  <a href="https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies" rel="nofollow noreferrer">https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies</a>
  
  <blockquote>
    <ol>
    <li>Remove the existing bower_components folder.</li>
    </ol>
  </blockquote>
  
  <pre><code>rm -rf bower_components
  </code></pre>
  
  <blockquote>
    <ol start="2">
    <li>Update the Polymer version in bower.json to the latest versions.</li>
    </ol>
  </blockquote>
  
  <pre><code>Component            | Version
  ---------------------|--------
  Polymer              | ^2.0.0
  webcomponentsjs      | ^1.0.0
  web-component-tester | ^6.0.0
  Polymer elements     | ^2.0.0
  </code></pre>
  
  <blockquote>
    <ol start="3">
    <li>Install the new dependencies.</li>
    </ol>
  </blockquote>
  
  <pre><code>bower install
  </code></pre>
  
  <p>This did not solve the problem. However I could not update <code>Polymer elements</code> to <code>^2.0.0</code></p>
  
  bower.json
  
  <pre><code>"dependencies" : {
    ...
    "polymer-elements" : "^2.0.0",
    ...
  }
  </code></pre>
  
  <p>caused an error and so did:</p>
  
  bower.json
  
  <pre><code>"dependencies" : {
    ...
    "polymerelements" : "^2.0.0",
    ...
  }
  </code></pre>
  
  <p>and so did:</p>
  
  bower.json
  
  <pre><code>"dependencies" : {
    ...
    "PolymerElements" : "^2.0.0",
    ...
  }
  </code></pre>