Question

摘要

我正在开发基于Polymer入门套件的Polymer项目，我遇到了一个问题，即默认图标集中的图标没有出现。它们的大小和样式是正确计算的，但是当我使用inspect元素时，标签中没有SVG。我已经尝试了maps和social的图标，这些图标都可以使用，但icons中的图标只是没有图片。

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

在此处关注this Stack Overflow问题后，我执行了已接受的解决方案，但没有结果。
我删除了所有的Polymer组件并执行了新的bower install + bower update。仍然没有。
我在某处发现Polymer Starter Kit与my-icons.html文件存在冲突，因此我将其重命名为custom-icons.html。这也没有用。

这非常令人困惑和令人沮丧，因为这个问题似乎无处不在。有一天默认的铁图标正在工作，而下一个他们不是。

我的导入

<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时，生成的代码库将包含修复程序。

我怀疑问题是与你最近修复的iconset（Issue #934）的命名冲突。

在修复之前，name of the custom iconset in Polymer Starter Kit为icons，遗憾的是<iron-icons>中的name of the default iconset。由于您的custom-icons.html导入发生在iron-icons.html之后，因此您的图标集优先。

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

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

聚合物 - 铁图标中设置的默认图标不会显示，但所有其他设置都有效

摘要

我的导入

利用

1 个答案: