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

Asked 2/6, 2015 at 23:19 Answered 24/6, 2015 at 2:13

Solved meteor polymer polymer-1.0 meteor-blaze

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.

Arda answered 2/6, 2015 at 23:19 Comment(0)

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.

Form answered 8/6, 2015 at 15:19 Comment(8)

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. – Arda 8/6, 2015 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. – Cement 8/6, 2015 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 and on 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 :-) – Cement 8/6, 2015 at 20:1

@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). – Cement 8/6, 2015 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. – Arda 8/6, 2015 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! – Saphead 13/6, 2015 at 2:7

@Saphead 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. – Cement 22/6, 2015 at 14:27

For me, all I needed was <link rel="import" href="/bower_components/iron-icons/iron-icons.html"> (Though it's possible my issue is unrelated.) – Kozlowski 22/12, 2015 at 5:54

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>

Form answered 3/6, 2015 at 1:16 Comment(2)

Just tried it the other way around:

<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>

– Cement 3/6, 2015 at 1:23

Thanks for your workaround @Juergen Fink . As a workaround, I have been using the below code:

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

wraps around nicely too. Will wait to see what others have to comment. – Arda 3/6, 2015 at 1:26

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

Saphead answered 24/6, 2015 at 2:13 Comment(4)

Thanks @Saphead for referring to the forum! I have indeed been following that thread myself :) – Arda 24/6, 2015 at 20:32

This is another github repo where in "Blaze and Spacebars are being replaced with Polymer" @ github.com/synka/meteor-polymer. However, I have not tried that myself yet. – Arda 24/6, 2015 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. – Saphead 25/6, 2015 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 – Arda 26/6, 2015 at 9:10

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Solution:

iron-icons.html:

Recommended topics

Hot tags