Polymer

Question

我正在开发一个使用 Polymer 的应用程序。我需要将 IcoMoon Free Fonts 包含到我的应用程序中。出于某种原因，我无法将图标放入我的应用程序中。这是我尝试过的：

选择了上面 link 处的所有图标。
点击了左下方的 "Generate SVG, PNG, PDF" 按钮。
点击了左下方的 "Download" 按钮。
将 .zip 文件内容解压到一个目录中。
在文本编辑器中打开了符号-defs.svg 文件。
复制了 defs 元素及其所有内容。
创建了一个名为 "icomoon.html"
将以下代码放入icomoon.html，基于this：

icomoon.html

<iron-iconset-svg name="icomoon" size="100">
  <svg>
    <!-- Code copied in step 6 placed here -->
  </svg>
</iron-iconset-svg>

在我的元素中，我添加了<link rel="import" href="[path]/icomoon.html">
然后我尝试通过说 <iron-icon icon="icomoon:icon-home"></iron-icon> 来使用图标。

图标没有出现。我不明白为什么。

更新

icomoon.html

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

<iron-iconset-svg name="icomoon" size="50">
    <svg>
        <defs>
            <path id="home" d="M1024 590.446l-512-397.428-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-768v-384l384-288z"></path>    
        </defs>
    </svg>  
</iron-iconset-svg>

Answer 1

Here is an example for a FontAwesome iconset。我使用 SVG 元素来显示图标字体中的字符。因此，您的用例可能会有所不同。元素结构来自 Dart，所以不要怀疑它看起来是否奇怪。

我不得不补充

<bwu-fontawesome-iconset-svg></bwu-fontawesome-iconset-svg>

使图标可用。 examle code

Answer 2

我必须将一些自定义 svg 导入到我的图标集中

我是这样做的:

    <iron-iconset-svg name="custom" size="50">
    <svg><defs>
    <g id="temp"><path d="M31.666,39.707c0,3.675-2.99,6.664-6.667,6.664c-3.675,0-6.665-2.989-6.665-6.664c0-2.484,1.371-4.748,3.58-5.904
        l0.907-0.477V5.807c0-1.201,0.978-2.178,2.178-2.178s2.179,0.977,2.179,2.178v27.52l0.907,0.476
        C30.293,34.958,31.666,37.223,31.666,39.707z M24.999,1.936c-2.138,0-3.871,1.733-3.871,3.871v26.495
        c-2.666,1.396-4.487,4.188-4.487,7.405c0,4.616,3.742,8.357,8.358,8.357c4.617,0,8.36-3.741,8.36-8.357
        c0-3.221-1.822-6.009-4.489-7.405V5.807C28.87,3.669,27.137,1.936,24.999,1.936 M24.999,0c3.202,0,5.808,2.604,5.808,5.807v25.402
        c2.795,1.906,4.488,5.063,4.488,8.498C35.295,45.382,30.676,50,24.999,50c-5.676,0-10.294-4.618-10.294-10.293
        c0-3.436,1.692-6.591,4.487-8.497V5.807C19.192,2.604,21.797,0,24.999,0L24.999,0z"/></g>

<g id="sun">
    <path d="M48.621,23.622h-9.672c-0.278-2.833-1.401-5.419-3.114-7.505l4.919-4.92c0.539-0.539,0.539-1.412,0-1.951
    s-1.412-0.539-1.951,0l-4.919,4.92c-2.086-1.714-4.672-2.836-7.504-3.114V1.38C26.38,0.618,25.762,0,25,0
    c-0.763,0-1.38,0.618-1.38,1.38v9.672c-2.832,0.278-5.418,1.4-7.504,3.114l-4.92-4.92c-0.539-0.539-1.412-0.539-1.951,0
    c-0.538,0.539-0.538,1.412,0,1.951l4.92,4.92c-1.713,2.086-2.836,4.672-3.114,7.505H1.38c-0.762,0-1.38,0.616-1.38,1.38
    c0,0.761,0.618,1.38,1.38,1.38h9.671c0.278,2.831,1.401,5.417,3.114,7.503l-4.92,4.92c-0.538,0.538-0.538,1.412,0,1.95
    c0.27,0.27,0.623,0.404,0.976,0.404c0.354,0,0.706-0.135,0.976-0.404l4.92-4.919c2.086,1.713,4.672,2.835,7.504,3.113v9.672
    C23.62,49.384,24.237,50,25,50c0.762,0,1.38-0.616,1.38-1.379v-9.672c2.832-0.278,5.418-1.4,7.505-3.113l4.918,4.919
    c0.27,0.27,0.623,0.404,0.977,0.404c0.353,0,0.705-0.135,0.975-0.404c0.539-0.538,0.539-1.412,0-1.95l-4.919-4.92
    c1.713-2.086,2.836-4.672,3.114-7.503h9.672c0.761,0,1.379-0.619,1.379-1.38C50,24.238,49.382,23.622,48.621,23.622z M25,36.26
    c-6.208,0-11.259-5.051-11.259-11.258c0-6.209,5.051-11.261,11.259-11.261c6.209,0,11.26,5.052,11.26,11.261
    C36.26,31.209,31.209,36.26,25,36.26z"/>
</g>

    </defs></svg>
    </iron-iconset-svg>

顺便说一句，你可以根据需要在a中添加多少个svg

别忘了导入这个文件，然后你就可以使用你的图标了:

<iron-icon icon="custom:temp"></iron-icon>

Answer 3

刚刚看了看 icomoon 图标。我无法让主页图标显示出来，但是我发现这个有效：

<g id="icon-spades" viewBox="0 0 38 38"> 
<path d="M25.549 10.88c-6.049-4.496-8.133-8.094-9.549-10.88v0c-0 0-0-0-0-0v0c-1.415 2.785-3.5 6.384-9.549 10.88-10.314 7.665-0.606 18.365 7.93 12.476-0.556 3.654-2.454 6.318-4.381 7.465v1.179h12.001v-1.179c-1.928-1.147-3.825-3.811-4.382-7.465 8.535 5.889 18.244-4.811 7.93-12.476z"/>
</g>

它没有显示框

Polymer - 通过 iron-iconset-svg 加载自定义图标

Polymer - Load custom icons via iron-iconset-svg

svg

icon-fonts