聚合物纸图标按钮和隐藏的铁图标

时间:2016-08-06 23:15:11

标签: html polymer web-component

我可以使用地图,设备,AV ...图标,但不能使用普通图标。 当然还有地图图标 我该怎么办?

我的进口商品:

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

该代码无法正常工作

<paper-icon-button icon="icons:account-circle"></paper-icon-button>

enter image description here

2 个答案:

答案 0 :(得分:0)

  1. 导入看起来正确,它们在Polymer 1.x中有效。
  2. 您应该检查控制台是否存在错误 - 可能是那里存在一些导入错误(例如,bower_components的错误路径)。
  3. 检查开发工具中呈现的HTML。如果你看到类似的东西:

    <iron-icon id="icon" class="…">
        <svg…>…</svg>
    </iron-icon>
    
  4. 然后很有可能因为一些CSS问题而没有显示图标。因此,在打开开发工具时,请检查应用于元素的CSS以确定问题。

答案 1 :(得分:0)

<强>解决! 好的,我明白了。有一个名为 my-icons.html 的文件。 在这个文件中,我不得不添加我在项目中使用的我的图标。

<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="icons" size="24">
<svg><defs>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g>
<g id="save"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></g>
<g id="create"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></g>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></g>
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></g>
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
</defs></svg>
</iron-iconset-svg>

cc:@spliter