Polymer 1.0 icons not showing in Chrome, Blaze issue?

mspi · June 2, 2015, 3:13am

Hi,

I know…you probably going to say this is a Polymer issue.
But I am not totally sure, because when I render this simple layout:

template(name="globalLayout2")


paper-drawer-panel
    paper-header-panel(drawer)
        paper-toolbar
            div Application
        div  Drawer content...
            paper-menu
                 paper-icon-item
                    iron-icon(icon="inbox" item-icon)
                    | Inbox


    paper-header-panel(main='')
        paper-toolbar
            paper-icon-button(icon='menu', paper-drawer-toggle='')
            div Title
        div  Main content...

it doesnt show the iron-icon in Chrome. Safari works fine.
However, when I display the paper Icon demo: http://localhost:3000/components/paper-item/demo/index.html
which runs without Meteor or Blaze, the icons work fine.
So…could it be Blaze that is messing things up in the Polymer load order for Chrome?

mspi · June 2, 2015, 3:45am

Little work around fix for now:

$(window).on "WebComponentsReady", (e)->
    window.WebComponentsReady.set true

and than register a global helper which returns the webComponentReady and use that to add the icons in an IF block.
Hopefully a temporary fix for now

doedel · June 7, 2015, 9:10am

I had the same problem and I figured out that if you just change the order of the links in the head, then it works fine.

Example:

Put just the icon links on the top of your include !
That fixes it for me.

doedel · June 7, 2015, 9:11am

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

  <link rel="import" href="/bower_components/paper-button/paper-button.html">
  <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html">
  <link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
  <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
  <link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">

mspi · June 7, 2015, 1:09pm

I think I tried that with no success, moved all links around.
Any other things you did?

doedel · June 7, 2015, 1:27pm

Do you use a a polymer package ?
I use
https://atmospherejs.com/boxxa/polymer
https://atmospherejs.com/boxxa/polymer-paper

but I will move to
https://atmospherejs.com/loneleeandroo/polymerize

This guy is very eager in improving his package.

mspi · June 8, 2015, 3:53am

haha thats funny.
I know him, he is my colleague. Definitely give his package a try

mspi · June 8, 2015, 12:34pm

So, I get this message:

Could not find iconset,

however if I have a global helper like this:

           +if WebComponentsReady
                paper-menu
                     paper-item
                        iron-icon(icon="inbox" item-icon)
                        | Inbox

which is just true or false based on the firing of WebComponentsREady event, it does render normally.
Bit annoying of course to postpone loading till this event has fired.

It has been reported as a bug:

github.com/PolymerElements/iron-icon

Chrome Cannot Find Iconset

opened 09:13PM - 30 May 15 UTC

closed 12:48AM - 03 Oct 15 UTC

jatsrt

bug

Seeing this error in the console only on chrome. iron-icon.html:167 [iron-icon:…:_updateIcon]: could not find iconset `icons`, did you import the iconset? This happens for all iconsets that are included and I try to use. I also tried changing the import order of iron-icons.html to before and after the iconsets are imported and nothing changes. Icons from the icon sets show up fine in FABs and other items. Chrome: ![screen shot 2015-05-30 at 5 09 26 pm](https://cloud.githubusercontent.com/assets/635242/7899384/c7f82796-06ee-11e5-936c-5e4c3d03ed80.png) Safari osx and iOS: ![screen shot 2015-05-30 at 5 09 46 pm](https://cloud.githubusercontent.com/assets/635242/7899385/c7f8f7e8-06ee-11e5-9992-42d44c2266f7.png)

So hopefully we will see a fix soon.

mspi · June 10, 2015, 12:43am

I have a test project that easily demonstrates the issue:

If you pull this and execute bower update it should NOT display the icons in Chrome.

shock · June 10, 2015, 6:04am

I dont see any bug, as chrome have this native support, it loads it god damn fast.
That means components which does not depend on any longer operation (as loading icon set could be) are loaded and ready very fast.
And if you decide to wait for that longer iconset loading operation (which is not even direct import in these components) than u need to orchestrate it yourself. It nicely provide event which you just need to wait to be on safe side.

From my point of view Polymer handle it correctly.

Same as using cordova in meteor, u need to wait till all is rdy and thats why u put it in startup function.

mspi · June 10, 2015, 7:23am

why was it working fine in Poylemer 0.5 then?
It only doesnt seem to work in combination with Blaze. The fact that Blaze renders the template and the Polymer elements messes something up with dependency load order IMO

shock · June 10, 2015, 8:05am

what dependency? you dont need any iconset to load icon - there is no direct link/dependency
just logical connection

there was dependency in Polymer 0.5, but in 1.0 there is none as I wrote above
they are 2 entities without any connection

shock · June 10, 2015, 8:08am

So if u want to use dependencies, you probably need your own element to wrap them and than use that element.
But still it does not sounds like clean solution to me.

mspi · June 10, 2015, 9:27am

No, I dont want dependencies.
I just use a paper element with an iron-icon. Nothing wrong with that, right?
I copy stuff from the demo’s of Polymer.
It breaks when loaded through Blaze.

The dependency I mention are only the initial imports of the elements in the head.
Have you tried a simple meteor app with a paper-icon like this:

   paper-menu
                 paper-item
                    iron-icon(icon="inbox" item-icon)
                    | Inbox

This should be valid polymer code, right?

shock · June 10, 2015, 9:44am

It is valid polymer code for static html.

If you generate whole html and let Polymer loads afterwards, result will be OK
If you let Polymer loads and add elements afterwards, result will be OK.

If you pick random moment in between to generate, results does not have to be right.

How you dont want dependencies? You want to have iron-icon and iron-icons loaded and these 2 elements have 0 connections between them. Still u expect them to sync somehow… but just expect

mspi · June 10, 2015, 10:08am

okay, I am getting confused now.

In my meteor project I have my import.html file where I load the record polymer elements, right. That should be okay.
Then I use Iron-Router (or flow router in another test) and I have a globalLayout where I load the standard Scaffold within the globalLayout template (blaze). Just Polymer elements.

Within the drawer I load my menu, paper-menu with paper-elements that have an iron-icon.
All stanard.
However, it doesnt load the icons. Triggers the “Could not find XXX icon set…”.

When using the WebComponentsReady Event to start rendering the Blaze template, the Icons work. But then the Scaffold falls apart.

I am not user what you mean with “Pick random moments”… I am just defining a Template.

Are you willing to explain further?

shock · June 10, 2015, 10:45am

Yes, but by not rendering all before loading Polymer, nor waiting till Polymer is rdy, we can define it as “random moment”

I tried to add dependency to iron-icons to iron-icon element, but still it did not help

So wrapping it this way also does not help.

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">


<dom-module id="test-wrap">
	<template>
		<content></content>
	</template>
	<script>
		Polymer({   
		      is: 'test-wrap'
		});
	</script>
</dom-module>

Probably best way would be to wait with rendering whole template till that webcomponents rdy is done. Not just minor template, the whole Polymer element scaffold.

mspi · June 10, 2015, 11:02am

we tried that, this guy has a nice example: https://github.com/loneleeandroo/meteor-polymerize/blob/master/polymerize-client.coffee

But this deferring Blaze load until webcomponentsReady actually triggers the error that the scaffold doesnt load correctly anymore. That was the other issue I posted and you replied on.

shock · June 10, 2015, 11:16am

from that example we cant see if he is deffering render.

only thing visible is re-render.

So I would not render any polymer component before that reactive variable is true.
Just yeld some dummy template, or in the main template prepare helper monitoring that ready.get() for example isReady and than use it {{#if isReady …

mspi · June 10, 2015, 11:50am

I am pretty sure It does defer, because on startup we replace the render function with a function that only calls the original render when the ready = true.
But anyway…I is only chrome related so it is a bug and would be fixed by the polymer team.
It is kinda annoying to develop in version 0.5 again but I am running into to many issues right now with 1.0