How do I render svg icons in a svg component?

Asked Apr 18 '17 at 19:20

Active Apr 18 '17 at 19:24

Viewed 182 times

I am working on an angular app where I have an icon font I created in IcoMoon with a bunch of icons, I want to render those icons in an SVG component such as this:

  <svg style="width: 700px; height: 700px" id="svgPanel">
  </svg>

I tried this, but it didn't work:

<svg:text [attr.x]="myObject.pos().x" [attr.y]="myObject.pos().y" class="myIcon"></svg:text>

Any ideas?

edited Apr 18 '17 at 19:24

David L

32,885
8
62
93

asked Apr 18 '17 at 19:20

OtoLeo

there's no text in that tag. could that be it? you also shouldn't need the `svg:` prefix on SVG children anymore – gonzofish Apr 18 '17 at 20:12
1

https://plnkr.co/2Gt7A1NCaDwdWw03Jye9 shows it working – gonzofish Apr 18 '17 at 20:14
@gonzofish thanks, but I want to render an icon from a font I created in IcoMoon. For text it works, I know. – OtoLeo Apr 18 '17 at 21:20
it might be helpful if you could show what that icon's markup looks like...i'm not very familiar with IcoMoon – gonzofish Apr 18 '17 at 21:32

How do I render svg icons in a svg component?

0 Answers0