Polymer

Question

总结

我正在开发一个基于 Polymer 初学者工具包的 Polymer 项目，我运行遇到了一个问题，即默认图标集中的图标没有出现。它们的大小和样式计算正确，但是当我使用检查元素时，标签中没有 SVG。我试过 maps 和 social 的图标都可以，但是 icons 的图标没有图像。

我尝试过各种不同的解决方案：

按照这里的堆栈溢出问题，我做了接受的解决方案，但没有结果。
我删除了我所有的 Polymer 组件并做了一个新的 bower install + bower update。还是不行。
我在某处看到 Polymer Starter Kit 与 my-icons.html 文件有冲突，所以我将其重命名为 custom-icons.html。这也没有用。

这让人非常困惑和沮丧，因为这个问题似乎突然冒出来了。有一天默认的 iron-icons 能用，第二天就不行了。

我的导入

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/iron-pages/iron-pages.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-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">

<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">

<link rel="import" href="app-data.html">
<link rel="import" href="log-out.html">
<link rel="import" href="custom-icons.html">

利用率

<a href="/#/home-quotes" tabindex="-1">
  <paper-icon-item>
    <iron-icon icon="icons:settings" item-icon></iron-icon> <!-- This doesn't work -->
    Home
  </paper-icon-item>
</a>
<a href="/#/secret-quotes" hidden$="[[!storedUser.loggedin]]" tabindex="-1">
  <paper-icon-item>
    <iron-icon icon="maps:add-location" item-icon></iron-icon> <!-- This works? -->
    Secret Quotes
  </paper-icon-item>
</a>

Answer 1

更新该错误已在 Polymer Starter Kit 2.1.1 中修复。现在，当您运行 polymer init starter-kit 时，生成的代码库将包含修复程序。

我怀疑问题是与您的图标集 (Issue #934) 的命名冲突，最近已修复。

修复之前，<iron-icons> 中的 name of the custom iconset in Polymer Starter Kit was icons, which is unfortunately also the name of the default iconset。由于您的 custom-icons.html 导入发生在 iron-icons.html 之后，您的图标集优先。

解决方法是重命名您的自定义图标以避免名称冲突，从而允许两个图标集共存。也就是说，将 custom-icons.html 中图标集的 name 属性更改为如下内容：

<iron-iconset-svg name="my-custom-icons" size="24">

Polymer - 铁图标中的默认图标集不显示，但所有其他集都有效

Polymer - Default icon set in iron-icons don't show up but all other sets work

html

polymer-1.0

polymer-starter-kit

总结

我的导入

利用率