发表新帖
发表新帖

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

前端 未结
关注
3 1561
暖寄归人
暖寄归人 2021-01-02 05:27

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:
相关标签:
3条回答
  • 感情败类
    2021-01-02 05:52

    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.

    0 讨论(0)
  • 忘了有多久
    2021-01-02 06:10

    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

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-02 06:11

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题