1

I am working on an app that uses Polymer. I need to include the IcoMoon Free Fonts into my app. For some reason, I can't get the icons into my app. Here is what I've tried:

  1. Selected all of the icons at the link above.
  2. Clicked the "Generate SVG, PNG, PDF" button in the lower left.
  3. Clicked the "Download" button in the lower left.
  4. Extracted the .zip file contents into a directory.
  5. Opened the symbol-defs.svg file in a text editor.
  6. Copied the defs element and all of its contents.
  7. Created a file called "icomoon.html"
  8. Put the following code in icomoon.html, based on this:

icomoon.html 

<iron-iconset-svg name="icomoon" size="100">
  <svg>
    <!-- Code copied in step 6 placed here -->
  </svg>
</iron-iconset-svg>
  1. In my element, I add <link rel="import" href="[path]/icomoon.html">
  2. I then attempt to use an icon by saying <iron-icon icon="icomoon:icon-home"></iron-icon>.

The icon doesn't appear. I don't understand why.

Update

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>
user70192
  • 13,786
  • 51
  • 160
  • 240

3 Answers3

2

Just had a look at the icomoon icons. I couldn't get the home icon to show up but I found this works:

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

Its doesn't show up without the viewbox

timmacp
  • 191
  • 1
  • 13
0

Here is an example for a FontAwesome iconset. I use an SVG element to display characters from an icon font. Therefore there might be some differences to your use case. The element structure is from Dart so don't wonder if it looks weird.

I had to add

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

to make the icons available. examle code

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I saw that example before posting my question. I tried to mimic it. Oddly, it didn't work for me with the icons I posted above. SVG is SVG is SVG right? The issue seems specific to the SVG code referenced above. – user70192 Dec 15 '15 at 15:24
  • Can you publish the entire code for the iconset and where you use it? – Günter Zöchbauer Dec 15 '15 at 16:43
  • I just updated the post to include the icomoon.html file contents. If I replace the value of the `d` attribute of the `path` element with the `d` attribute value of the "sun" element posted in the other comment, the "sun" appears. So I know that I'm loading the custom font properly. However, it's like the path information is incorrect. I can't believe that though either. – user70192 Dec 15 '15 at 18:26
0

i had to import some custom svg to my iconset

I did it like that :

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

by the way, you can add how many svg in a as you want

Don't forget to import this file, then you can use your icon :

<iron-icon icon="custom:temp"></iron-icon>
benjamin Rampon
  • 1,316
  • 11
  • 18
  • Thank you for your post. However, this does not work for my scenario. I just updated the post to include the icomoon.html file contents. If I replace the value of the `d` attribute of the `path` element with the `d` attribute value of your "sun" element posted above, the "sun" appears. So I know that I'm loading the custom font properly. However, it's like the path information is incorrect. I can't believe that though either. – user70192 Dec 15 '15 at 18:27
  • each icon is defined in a tag like provided, I also develop my own following this and it works fine, you have to follow this or this won't work... – Pascal Gula Dec 15 '15 at 22:20
  • @PascalGula I added the "g" tag. However, the behavior is the same. The sun icon appears when I use the `d` value shared by benjamin for the "sun". However, when I use the `d` value I provided in the question above, the icon does not appear. I do not understand why. – Some User Dec 16 '15 at 12:17