Question

升级到Polymer 1.0后，默认的iron-icons设置无效。我正在尝试使用默认图标集中的主页图标。

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调试器中收到警告：{-1}} @ line＃167 in iron-icon.html

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

[iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset?

this._iconset = this.$.meta.byKey(this._iconsetName);的值为“icons”，但this._iconsetName未定义。

我错过了一些重要信息吗？

编辑仅在Meteor中使用Blaze模板引擎时才会出现此问题。只想添加这一位以获得完整的图片。

Answer 1

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

Chrome调试器中警告的原因是由于以正确的顺序加载链接导入的错误时间。

解决方案：

1。）删除铁图标中的链接导入（如果需要，还可以删除其他图标集，如地图，社交等等）：

公共
- 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 rel='import' href='../iron-icon/iron-icon.html'>代码中，iron-icon正在引用尚未加载的图标集（<iron-iconset-svg name="icons" size="24">等...），因为它是在初始链接导入之后（由于阻塞）链接导入的性质）。因此，在第164行找不到默认图标集图标，因此在第167行抛出着名的警告：

无法找到iconset图标，你导入了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＆＃39; s：请告诉我们这是否也适合您。我也会在聚合物团队的github评论中发布这个。

Answer 2

我有同样的问题。似乎与<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>没有显示在按钮内（或者可能尝试造型按钮 - >放大等等......并且稍微摆弄一下）。希望这有助于同时作为快速解决方法......

然而，聚合物1.0岩石。值得努力......来自Polymer Team的好工作，谢谢。幸运的我们....： - ）

反过来尝试过，将图标按钮放在<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 3

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

聚合物1.0默认图标设置在铁图标不工作使用火焰（流星）模板引擎

3 个答案:

解决方案：

铁icons.html：