Polymer 1.0 default icon set in iron-icons not working using blaze (meteor) templating engine

After upgrading to Polymer 1.0, default iron-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?

EDIT This issue occurs only while using Blaze template engine in Meteor. Just wanted to add this bit for the complete picture.

Got the real solution now (not workaround), therefore opened new answer.

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.

@LuckyRay's : Please let us know whether this works for you, too. I will post this on your github comment for the Polymer Team as well.

I had same issue. Seems to be related to <paper-icon-item>. Try to replace it with <paper-icon-button> meanwhile (I quickly reproduced your code and it worked for me: at least your home-icon is showing up corrrectly now). Maybe someone else has another comment on this issue.

Hence, your HTML:

<paper-icon-button icon="home" id="socialFeed">
  <paper-icon-item>
        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>
  </paper-icon-item>
</paper-icon-button>

The <paper-item-body two-line> not showing within the button, though (or maybe try styling button -> enlarge, etc ... and fiddle around a bit). Hope this helps meanwhile anyway as a quick workaround ....

Polymer 1.0 rocks, though. Worth the effort .... good job from the Polymer Team, thanks. Lucky us .... :-)

Just tried it the other way around, putting the icon-button inside the <paper-icon-time>:

<paper-icon-item>
  <paper-icon-button icon="home" id="socialFeed"></paper-icon-button> 
  <paper-item-body two-line>
    <div>Social Feed</div>
    <div secondary>2 Unread FB Posts</div>
  </paper-item-body>
</paper-icon-item>

There is an experimental way of forcing to use the shadow DOM. Check this forum post at the bottom: https://forums.meteor.com/t/polymer-1-0-and-iron-router-or-flow-router/5148/16

来源：https://stackoverflow.com/questions/30608194/polymer-1-0-default-icon-set-in-iron-icons-not-working-using-blaze-meteor-temp

标签

meteor

polymer

polymer-1.0

meteor-blaze