Angular 4 template binding for glyph icons

Question

I'm trying to use open iconic icons but once I tried to dynamically set the icon name to data-glyph attributs it crash The error is:

Uncaught Error: Template parse errors:
Can't bind to 'glyph' since it isn't a known property of 'span'. ("
<span class="oi" [ERROR ->]data-glyph="{{value}}" title="icon name" aria-hidden="true"></span>
"): ng:///AppModule/ImageButtonComponent.html@1:17

Template part:

<span class="oi" data-glyph="{{value}}" title="icon name" aria-hidden="true"></span>

Answer 1

You can use this this:

<span [attr.data-glyph]="value"></span>

Plunkr example is available here.