Polymer dom-repeat xlink not rendered as expected

I have almost the same issue as this question describes.

I have some svg symbols which I want to dynamically insert with Polymers dom-repeat.

I get with a function all ids from the symbols I need in an array {{icons}} and I then loop true it to insert my svg's.

My code looks like this:

<div class = 'housing-icons'>
  <template is="dom-repeat" items="{{icons}}">
    <div id = 'BUTTONID'>
      <svg class="icon">
        <use xlink:href$='{{item.id}}'></use>
        <!--<use xlink:href='#bed'></use>-->  !!! This works as expected !!!
    <paper-tooltip class="tooltip" for="BUTTONID" animation-config="{"entry": [], "exit": []}" position="top"><div class="tooltip__label">Lorem ipsum</div></paper-tooltip>

When I hard code the id #bed in the <use> tag everything is fine and looks like this in the dev tools:

<use xlink:href="#bed" class="style-scope custom-housing_icons"></use>

But when I want to use data-binding {{item.id}}, the icons are not shown and it looks like this in the dev tools:

<use class="style-scope custom-housing_icons" xlink:href="#bed"></use>

Any ideas how to solve this would be greatly appreciated


This is a know issue. There should also be another SO question. AFAIR a workaround is to add the namespace statically

<use xlink:href$='{{item.id}}' xlink:href='#dummy'></use>

Polymer seems to be able to update xlink:href just fine but can't create it.

Need Your Help

Calling a method on NPAPI plugin object respawns the plugin

javascript c++ npapi browser-plugin

I have a NPAPI plugin embedded in a HTML page. When I call a method on it from browser's developer console, everything is ok - methods call lands on the right plugin instance and is properly execut...

Select Item in formview based on drop down selected item

c# asp.net drop-down-menu formview

I am trying to get a drop down and a form view to work together. I've never used form views before. I also am using the entity framework to do everything. This is also my first time with it.