Polymer 1.0 default icon set in iron-icons not working

[rohanray]

After upgrading to Polymer 1.0, default core-icons set is not working. I am trying to use home icon from the default icon set.

HTML code fragment:

    <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="/components/iron-icons/iron-icons.html">
    <link rel="import" href="/components/iron-icons/communication-icons.html">
    <link rel="import" href="/components/iron-form/iron-form.html">
    <link rel="import" href="/components/iron-selector/iron-selector.html">
    <link rel="import" href="/components/iron-pages/iron-pages.html">

    <!-- OOTB paper elements -->
    <link rel="import" href="/components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="/components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="/components/paper-toolbar/paper-toolbar.html">

    <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="/components/paper-material/paper-material.html">

    <link rel="import" href="/components/paper-menu/paper-menu.html">
    <link rel="import" href="/components/paper-item/all-imports.html">

    <link rel="import" href="/components/paper-tabs/paper-tab.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs-icons.html">

<paper-icon-item id="socialFeed">

        <iron-icon icon="home" item-icon></iron-icon>

        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>

</paper-icon-item>

I am getting a warning in Chrome debugger:[iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset? @ line#167 in iron-icon.html

Debugging showed that in line 163 in iron-icon.html which is

this._iconset = this.$.meta.byKey(this._iconsetName);

this._iconsetName has value "icons" but this._iconset is undefined.

Am I missing some import or something here?

[rohanray]

This issue exists only in Chrome. In Firefox, the icons work fine.

[jurgenfink]

Found the solution.

The cause of the warning in Chrome debugger is due to the wrong timing of loading the link imports in the right sequence.

Solution:

1.) Remove link imports in the iron-icons (and other icon-sets if needed, like maps, social, etc ...):

• public
  • bower_components
  • iron-icons
    • iron-icons.html
    • maps-icons.html (optional, if you are using them)
    • social-icons.html (optional, if you are using them)

iron-icons.html:

before:

<!--@group Iron Elements
@element iron-icons
@demo demo/index.html
-->
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

after:

<!--@group Iron Elements
@element iron-icons
@demo demo/index.html
-->
<!--<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>-->

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

The initial link-imports (dependencies) are blocking (not loading async but sync, which is good because that's the way it should be). However, within the code of <link rel='import' href='../iron-icon/iron-icon.html'> iron-icon is making reference to the icon set that could not load yet (<iron-iconset-svg name="icons" size="24"> etc ...) because it comes after that initial link-import (due to blocking nature of link import). Hence, at line 164 it cannot find the Default iconset icons, and therefore throwing the famous warning at line 167:

could not find iconset icons, did you import the iconset?

2.) Load required dependencies in your project file in the correct sequence:

<head>
  <meta charset="utf-8" />
  <title></title>

  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">

  <link rel="import" href="/bower_components/iron-meta/iron-meta.html">
  <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="/bower_components/iron-iconset-svg/iron-iconset-svg.html">
  <link rel="import" href="/bower_components/iron-iconset/iron-iconset.html">

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

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

The <link rel="import" href="/bower_components/iron-icon/iron-icon.html"> is loaded in last position now, hence all dependencies are available at this point.

Works like a charm for me now.

[rohanray]

Solution provided by @jurgenfink resolves the issue.

[jurgenfink]

@rohanray Thank you for testing.

Also, I tested the Eventlistener for WebComponentsReady provided by @mattiLeBlanc at https://github.com/PolymerElements/iron-icon/issues/19 and it works like a charm, too.

window.addEventListener('WebComponentsReady', function(e) {
    // do stuff here as components are loaded .....
});

Again, thank you @rohanray because it was your post in Stack Overflow that I first found on that issue. You did well raising this question at that early stage of Polymer 1.0