custom icon not showing up in iron-icon

Question

I'm trying to use some custom svg icon in iron-icon element but it's not showing up. All standard icons from iron-iconset are working great. I linked all neccessary polymer libraries but it's still haven't resolved my problem

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/av-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/iron-icons/image-icons.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="custom-icon.html">

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

here is custom-icon.html

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

<iron-iconset-svg name="custom" size=4>
    <svg>
        <defs>
            <g id="nodejs">
                <path d="M116.504151,3.58037736 C123.46566,-0.404528302...
            </g>
</iron-iconset-svg>

Can someone help me to resolve this issue?

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-03-14T16:14:20

I guess

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

should be

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

(my-icon should be nodejs according to your example, but I assume your iconset contains a <g id="my-icon">)

or alterantively

<iron-iconset-svg name="custom" size=4>

should be

<iron-iconset-svg name="custom-icon" size=4>

custom icon not showing up in iron-icon

1 Answers