聚合物-通过iron图标集svg加载自定义图标

我正在开发一款使用聚合物的应用程序。我需要在我的应用程序中包含。由于某些原因，我无法将图标放入我的应用程序。以下是我尝试过的：

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

选中上面链接上的所有图标

单击左下角的“生成SVG、PNG、PDF”按钮

单击左下角的“下载”按钮

将.zip文件内容解压缩到目录中

在文本编辑器中打开symbol-defs.svg文件

复制了

defs

元素及其所有内容

创建了一个名为“icomoon.html”的文件

基于以下内容，将以下代码放入icomoon.html中：

icomoon.html

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

在我的元素中，我添加了

然后我尝试使用一个图标，说

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

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

更新

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

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="../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>

。 我使用SVG元素显示图标字体中的字符。因此，您的用例可能存在一些差异。元素结构来自Dart，所以不要怀疑它看起来是否奇怪

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

我必须补充一点

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

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

---

使图标可用

我不得不将一些自定义svg导入我的iconset

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

我是这样做的：

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

顺便说一下，您可以根据需要在一个文件中添加多少svg

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

不要忘记导入此文件，然后您可以使用图标：

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

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

---

刚刚看了一下图标。 我无法让主图标显示，但是 我发现这很有效：

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

<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>

---

如果没有viewbox，它不会显示

在发布问题之前，我看到了这个示例。我试着模仿它。奇怪的是，我上面贴的图标对我不起作用。SVG是SVG是SVG吗？这个问题似乎与上面提到的SVG代码有关。您可以发布iconset的全部代码以及在哪里使用它吗？我刚刚更新了文章，以包含icomoon.html文件内容。如果我将

path

元素的

d

属性值替换为其他注释中发布的“sun”元素的

d

属性值，则会出现“sun”。因此，我知道我正在正确加载自定义字体。但是，路径信息好像不正确。我也不敢相信。谢谢你的帖子。但是，这不适用于我的场景。我刚刚更新了帖子，加入了icomoon.html文件内容。如果我将

path

元素的

d

属性值替换为上面发布的“sun”元素的

d

属性值，则会出现“sun”。因此，我知道我正在正确加载自定义字体。但是，路径信息好像不正确。我也不敢相信。每个图标都是在一个标签中定义的，就像提供的一样，我也开发了我自己的标签，它可以很好地工作，你必须遵循这个，否则这个就不行了…@PascalGula我添加了“g”标签。但是，行为是一样的。当我使用benjamin为“sun”共享的

d

值时，会出现sun图标。但是，当我使用上述问题中提供的

d

值时，图标不会出现。我不明白为什么。

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