search

PolymerElements / iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg
37 stars 34 forks source link

Fix icon mapping time #11

Closed sjmiles closed 9 years ago

sjmiles commented 9 years ago

Fixing #10

cdata commented 9 years ago

LGTM :+1:

jurgenfink commented 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.