Pass value dynamically to data-* attribute [Angular2]

Question

I want to write a component, which basically display a different icon based on its input. The icon framework is expecting it in the following format:

  <span class="icon icon-generic" data-icon="B"></span>

So data-icon="B" describes basically which icon to display. I would like to pass this symbol dynamically. Something like:

  <span class="icon icon-generic" data-icon={{symbol}}></span>

But this seems not to work. :-/ Is there a way to do this without creating the html in my Component class and appending it to the html?

Answer 1

Use

 <span class="icon icon-generic" [attr.data-icon]='symbol'></span>

Answer 2

Attribute bindings need the attr. prefix

attr.data-icon={{symbol}}