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

Question

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.

score 11 · Accepted Answer · answered Jun 08 '15 at 15:19

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.

Thanks @Juergen Fink! I must say you have indeed nailed the issue. Please post your findings as comments in the issue raised in github. I would like to add though, that this issue exists only in Chrome and not Firefox though. — roray, Jun 08 '15 at 17:58
@LuckyRay's Thanks for your feedback. Yes, you are right. In Firefox working well. Maybe, because Chrome has polymer incorporated natively, and maybe therefore the issue with the timing of the loading of the dependencies. I posted issue on github, thanks to your link that you provided in your comment - helped a lot. — Jürgen Fink, Jun 08 '15 at 19:42
@LuckyRay's Posted on your issue #19 on github and on the merged issue #14 [https://github.com/PolymerElements/iron-icon/issues/19](https://github.com/PolymerElements/iron-icon/issues/19) and on [https://github.com/PolymerElements/iron-icons/issues/14](https://github.com/PolymerElements/iron-icons/issues/14) Thank you for having opened that valuable question - many have same problem and responded positively on github already - seems to work :-) — Jürgen Fink, Jun 08 '15 at 20:01
@LuckyRay's saw your confirmation on github - you are fast. Thanks and again thank you for having raised this issue here on Stack Overflow and on Github - well done LuckyRay's. The issue is important because it blocked my whole app to load properly. Now loading smoothly like a baby (that's why I have made the effort to find the real cause of it - 3 days of fiddling around .... he he he). — Jürgen Fink, Jun 08 '15 at 20:14
Thanks @Juergen Fink for hitting the bull's eye on this one! Hope Polymer team picks it up and fixes it in next release. — roray, Jun 08 '15 at 20:21
Guys, sorry to be a party pooper,...but changing the stock polymer elements doesnt seem to be a proper solution for me. I don't want to edit those, only the ones I build myself. However, I am happy this issue is getting more attention! — Mattijs, Jun 13 '15 at 02:07
@Mattijs we agree 100% with you. Let's hope that the Polymer Team will implement an internal solution to that issue with the next update (as we know now, it's got to do with the availability of the icons at execution time of the script). Meanwhile, we had to resolve somehow in order to move on with our projects. — Jürgen Fink, Jun 22 '15 at 14:27
For me, all I needed was `` (Though it's possible my issue is unrelated.) — Ajedi32, Dec 22 '15 at 05:54

Jürgen Fink · Answer 2 · 2015-06-03T01:25:57.727

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>

Just tried it the other way around: `
Social Feed

2 Unread FB Posts
` — Jürgen Fink, Jun 03 '15 at 01:23
Thanks for your workaround @Juergen Fink . As a workaround, I have been using the below code: `
Social Feed

2 Unread FB Posts
` wraps around nicely too. Will wait to see what others have to comment. — roray, Jun 03 '15 at 01:26

score 0 · Answer 3 · answered Jun 24 '15 at 02:13

0

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

answered Jun 24 '15 at 02:13

Mattijs

3,265
3
38
35

Thanks @Mattijs for referring to the forum! I have indeed been following that thread myself :) – roray Jun 24 '15 at 20:32
This is another github repo where in "Blaze and Spacebars are being replaced with Polymer" @ https://github.com/synka/meteor-polymer. However, I have not tried that myself yet. – roray Jun 24 '15 at 20:35
I will wait for fixes to come out first, I stopped migrating my 0.5 project to 1.0. To many issues, and it is delaying development. – Mattijs Jun 25 '15 at 23:41
Unfortunately yes, you are right indeed! Too many issues with 1.0. I am too waiting for fixes rather than poking around core Polymer – roray Jun 26 '15 at 09:10

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

3 Answers3

Solution:

iron-icons.html:

Linked