title: Why is my Polymer iron-icon appearing below my paper-input on navigation?
body: <p>I have some simple code (Angular2 + Polymer) that creates a <code>paper-input</code> with a <code>iron-icon</code> as a <code>suffix</code> icon:</p>
  
  <pre><code> &lt;paper-input type="text" [control]="email" label="Email"&gt;
         &lt;iron-icon suffix icon="mail"&gt;&lt;/iron-icon&gt;
   &lt;/paper-input&gt;
  </code></pre>
  
  <p>Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:</p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;h1 class="paper-font-headline"&gt;Admin Registration&lt;/h1&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col s12 m6 6"&gt;
              &lt;p class="paper-font-body2"&gt;some stuff here&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col s12 m6 6"&gt;
              &lt;paper-card class="stretch"&gt;
                  &lt;div class="sub-section"&gt;
                      &lt;form&gt;
                          &lt;paper-input type="text"
                                       [control]="email"
                                       label="Email"&gt;
                              &lt;iron-icon suffix icon="mail"&gt;&lt;/iron-icon&gt;
                          &lt;/paper-input&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/paper-card&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This looks pretty good on page load:</p>
  
  <p><a href="https://i.stack.imgur.com/CHQFy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CHQFy.png" alt="enter image description here"></a></p>
  
  <p>When I navigate away from the page and back, however, the icon falls below the input:</p>
  
  <p><a href="https://i.stack.imgur.com/IJDmY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IJDmY.png" alt="enter image description here"></a></p>
  
  <p>In the html you can clearly see that the icon is placed outside of the <code>paper-input-container</code> on navigation.</p>
  
  <p>Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use <code>webcomponents-lite.js</code> in my index.html file. <code>webcomponents.js</code> has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>This is <strong>not</strong> an issue in Chrome, but in the other major browsers.</p>
  
  <p>Here are my imports in case they are relevant:</p>
  
  <pre><code>    &lt;!-- 1. Load libraries --&gt;
      &lt;!-- IE required polyfills, in this exact order --&gt;
      &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;
  
      &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          window.Polymer = window.Polymer || {};
          window.Polymer.dom = 'shadow';
      &lt;/script&gt;
  
      &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  
      &lt;link rel="import" href="bower_components/paper-styles/classes/global.html"&gt;
      &lt;link rel="import" href="bower_components/paper-styles/classes/shadow.html"&gt;
      &lt;link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html"&gt;
      &lt;link rel="import" href="bower_components/paper-styles/classes/typography.html"&gt;
  
      &lt;link rel="import" href="bower_components/polymer/polymer.html"&gt;
      &lt;link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"&gt;
      &lt;link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html"&gt;
      &lt;link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"&gt;
      &lt;link rel="import" href="bower_components/paper-menu/paper-menu.html"&gt;
      &lt;link rel="import" href="bower_components/paper-item/paper-item.html"&gt;
      &lt;link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"&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-ripple/paper-ripple.html"&gt;
      &lt;link rel="import" href="bower_components/paper-card/paper-card.html"&gt;
      &lt;link rel="import" href="bower_components/paper-input/paper-input.html"&gt;
  </code></pre>
  
  <p>Here are my <code>bower.json</code> dependencies:</p>
  
  <pre><code>"dependencies": {
      "webcomponentsjs": "~0.7.21",
      "polymer": "Polymer/polymer#~1.3.0",
      "paper-elements": "PolymerElements/paper-elements#~1.0.7"
    }
  </code></pre>