1

I have an API which returns data in the following format:

[{"title": "first", "icon": "firstIcon.svg"},
 {"title": "second", "icon": "iconForSecond.svg"}
 .
 .
]

I want to add these to an Angular2 page using *ngFor. I can do this using the SVG as images easily using:

<div *ngFor="">
  <img [src]='item.icon'/> item.title
</div>

However, if I try to do the same thing with using SVG as as specified in [1], because I want to be able to apply CSS hover styles on the SVG etc. I can't seem to get it work. Neither of the 2 methods I tried works.

<object data="item.icon" type="image/svg+xml"> // Does not work
<object [data]="item.icon" type="image/svg+xml"> // Does  not work

How should I go about this? What am I missing here?

[1] Do I use <img>, <object>, or <embed> for SVG files?

Community
  • 1
  • 1
navinpai
  • 955
  • 11
  • 33

1 Answers1

0

Check this one 

<object data="{{ 'path/to/svg/' + item.icon }}" type="image/svg+xml">
    <img src="yourfallback.jpg" />
</object>
Calvin Ferrando
  • 3,794
  • 3
  • 16
  • 26