铁图标中的 Polymer 1.0 默认图标设置无法使用 blaze（流星）模板引擎

Question

升级到 Polymer 1.0 后，默认的铁图标集不起作用。我正在尝试使用默认图标集中的主页图标。

HTML代码片段：

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

我在 Chrome 调试器中收到警告：[iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset? @ line#167 in iron-icon.html

调试显示在iron-icon.html的第163行是

this._iconset = this.$.meta.byKey(this._iconsetName);

this._iconsetName 具有值 "icons" 但 this._iconset 未定义。

我是不是遗漏了一些导入或其他东西？

编辑只有在 Meteor 中使用 Blaze 模板引擎时才会出现此问题。只是想为完整图片添加这一点。

Answer 1

我有同样的问题。似乎与<paper-icon-item>有关。同时尝试用 <paper-icon-button> 替换它（我很快复制了你的代码并且它对我有用：至少你的主页图标现在正确显示）。也许其他人对此问题有其他评论。

因此，您的 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>

<paper-item-body two-line> 没有显示在按钮中，但是（或者尝试样式化按钮 -> 放大，等等...... fiddle 稍微）。希望这有助于同时作为一种快速解决方法....

不过，Polymer 1.0 很不错。值得付出努力......聚合物团队干得好，谢谢。幸运的我们.... :-)

刚试过反过来，把图标按钮放在 <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>

Answer 2

现在找到了真正的解决方案（不是解决方法），因此打开了新的答案。

Chrome 调试器中出现警告的原因是按正确顺序加载 link 导入的时间错误。

解决方案：

1.) 删除 iron-icons 中的 link 导入（如果需要，还有其他图标集，如地图、社交等...）：

public
- bower_components
  - 铁图标
    - 铁-icons.html
    - maps-icons.html（可选，如果您正在使用它们）
    - social-icons.html（可选，如果您正在使用它们）

铁-icons.html:

之前：

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

之后：

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

最初的 link-导入（依赖项）是阻塞的（不是异步加载而是同步加载，这很好，因为它应该是这样）。但是，在 <link rel='import' href='../iron-icon/iron-icon.html'> 的代码中，iron-icon 引用了尚未加载的图标集（<iron-iconset-svg name="icons" size="24"> 等...），因为它是在初始 link-import 之后出现的（由于 link 导入的阻塞性质）。因此，在第 164 行，它找不到默认图标集 icons，因此在第 167 行抛出著名的警告：

could not find iconset icons, did you import the iconset?

2.) 以正确的顺序在项目文件中加载所需的依赖项：

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

<link rel="import" href="/bower_components/iron-icon/iron-icon.html"> 现在加载到最后一个位置，因此此时所有依赖项都可用。

现在对我来说就像一个魅力。

@LuckyRay 的：请让我们知道这是否也适合您。我也会 post 您对 Polymer 团队的 github 评论。

Answer 3

有一种强制使用阴影的实验方法DOM。在底部查看此论坛 post： https://forums.meteor.com/t/polymer-1-0-and-iron-router-or-flow-router/5148/16

铁图标中的 Polymer 1.0 默认图标设置无法使用 blaze（流星）模板引擎

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

meteor

polymer

meteor-blaze

polymer-1.0

解决方案：

铁-icons.html: