[0.9] Custom attributes on elements not working (original: iron-icon styling troubles)

[firasdib]

Hello,

I have a template using dom-repeat that produces a bunch of entries depending on values that change from time to time. The generated content contains icons which I color using css, depending on which icon it is. This works fine in Polymer 0.5 using aria-label or even adding a separate class to the element. In 0.9 this is no longer possible.

The code for the icon would be something like <iron-icon icon="[[_getIcon(resource)]]"></iron-icon> which works fine for the actual icon. The css on the other hand would look something like:
iron-icon[icon=menu] { color: red; } which does not work, and all my other attempts have not worked, such as adding a class to the element using _getIcon or the parent etc.

Any ideas how this can be solved? It has to be dynamic.

Thanks in advance.

[firasdib]

In fact, I believe this issue should be expanded to attributes in general. I am unable to set an attribute on a regular div that looks like this <div data-id="[[foo]]"> but the following works: <div id="[[foo]]">. A very weird limitation imo.

[firasdib]

My bad, I did not read the documentation well enough, Apparently you're supposed to use the new syntax: data-foo$="...".