Using ionicons glyphs in svg text elements



I’m creating a UI which is heavily based on inline svg, which works greatly btw. However, I have ran to a problem with using ionicons by referencing the glyph names defined in ionicons.svg.

So the idea is to have circular segments for each device that is connected with BT 4.0 to the phone. I’m drawing these segments with ng-repeat and svg g -> path d="{{device.pathdata}}" the drawing works fine, but when I try have a ionicon inside the segment with "text> {{device.icon}} element it will not work. Only way to get the icons to show is to hard code one of the unicode presentations straight in to the html view as following &#x f217;.

The problem is that even if I bind these unicode codes to the html with {{}} they will be presented as a string, not the icon. The best way would be to use just the glyphnames to draw the icons. I have made some research and found out the following solutions that are not working:

altGlyph or tref which should reference to the glyph (requires the id attribute for each glyph?)
i tag with the icon name (with and without foreignObject tag) this draws the icon after the svg div.

Does anyone have experience how to use custom font glyphs with the glyph name as reference in svg text element? I can provide some codepen sketch if the problem is not clear enough.

Update: Found a solution that unicodes should presented with the following syntax “\u+code”. Still it would be nice to use the icons by their names instead of unicodes. But this will do it for me now.