Closed sjmiles closed 9 years ago
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 ...):
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.
This just saved me a bunch of headache, thanks for figuring this out @jurgenfink
It's a gotcha, but the HTML parser can halt at any time when parsing a custom-element subtree, so an element can upgrade before all of it's children have been parsed.
Therefore,
iron-iconset-svg
cannot reliably construct the icon map at_nameChanged
time.