src tag for custom icons does not render for some svg group ids

[rocifier]

When adding a custom icon to ion-icon component using the src tag, some ids cause the svg to not be inserted into the DOM / rendered. For example, if you change the g id="o" to an id of "on" or "onon" or "one" or "OnePage" or "OnePage--my-id-1" or many other things, the icon doesn't get put inside the icon-inner div. Ids that I have found which do make the svg add into the ion-icon element: "a", "b", "bb", "bbb", "bbbb". "O". Removing the id from the group tag allows the icon to render into the DOM.

works:

<svg viewBox="0 0 18 20">
    <g id="o">
        <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
        <path d="M19,3 L14.82,3 C14.4,1.84 13.3,1 12,1 C10.7,1 9.6,1.84 9.18,3 L5,3 C3.9,3 3,3.9 3,5 L3,19 C3,20.1 3.9,21 5,21 L19,21 C20.1,21 21,20.1 21,19 L21,5 C21,3.9 20.1,3 19,3 L19,3 Z M12,3 C12.55,3 13,3.45 13,4 C13,4.55 12.55,5 12,5 C11.45,5 11,4.55 11,4 C11,3.45 11.45,3 12,3 L12,3 Z M12,7 C13.66,7 15,8.34 15,10 C15,11.66 13.66,13 12,13 C10.34,13 9,11.66 9,10 C9,8.34 10.34,7 12,7 L12,7 Z M18,19 L6,19 L6,17.6 C6,15.6 10,14.5 12,14.5 C14,14.5 18,15.6 18,17.6 L18,19 L18,19 Z" id="Shape" fill="white"></path>
    </g>
</svg>

doesn't work:

<svg viewBox="0 0 18 20">
    <g id="on">
        <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
        <path d="M19,3 L14.82,3 C14.4,1.84 13.3,1 12,1 C10.7,1 9.6,1.84 9.18,3 L5,3 C3.9,3 3,3.9 3,5 L3,19 C3,20.1 3.9,21 5,21 L19,21 C20.1,21 21,20.1 21,19 L21,5 C21,3.9 20.1,3 19,3 L19,3 Z M12,3 C12.55,3 13,3.45 13,4 C13,4.55 12.55,5 12,5 C11.45,5 11,4.55 11,4 C11,3.45 11.45,3 12,3 L12,3 Z M12,7 C13.66,7 15,8.34 15,10 C15,11.66 13.66,13 12,13 C10.34,13 9,11.66 9,10 C9,8.34 10.34,7 12,7 L12,7 Z M18,19 L6,19 L6,17.6 C6,15.6 10,14.5 12,14.5 C14,14.5 18,15.6 18,17.6 L18,19 L18,19 Z" id="Shape" fill="white"></path>
    </g>
</svg>

I can't think of any logical reason why changing this id arbitrarily makes this svg sometimes work and sometimes not? Also, the issue is only when the svg is used as an ionicon not when it is put inside of an ion-button directly, for example.

To reproduce, save the above xml as .svg file in the assets folder and link it with ionicons, eg: <ion-icon src="assets/icon.svg"></ion-icon>

EDIT: After searching through the code for ionicons, I found this line. For some reason if the element value contains "on" in any case then it thinks the svg is invalid. What is the purpose behind this conditional? How could we fix it?

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!