Svg Tags Within Polymer Dom-repeat

Question

I'm iterating over an object using dom-repeat, and want to reference different icons from an SVG sprite sheet with each iteration. To add an icon, I'm trying to use the

Solution 1:

I had exactly the same problem before and ended up using iron-iconset-svg (https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg), which in my opinion provides a cleaner/easier solution. Its simply a wrapper for your SVG sprite sheet, so you define your icons almost the same way and use them with iron-icon.

Defining a custom iconset (put it directly into the page or wrap it inside an element + set a name that describes the icons, here: 'your-iconset-name')

<iron-iconset-svgname="your-iconset-name"size="24"><svg><defs><gid="your-icon-name"><rectx="12"y="0"width="12"height="24" /><circlecx="12"cy="12"r="12" /></g></defs></svg></iron-iconset-svg>

If you wrap them, lets say in 'your-custom-iconset', you can include the iconset like this:

<your-custom-iconset></your-custom-iconset>

Using icons

When you need an icon you just include iron-icons (https://elements.polymer-project.org/elements/iron-icons) and place it like this:

<iron-iconicon="your-iconset-name:your-icon-name"></iron-icon>

You can then give it a class to apply styling and don't need to use 'fill' for its color, just use 'color'.

Applied to your example:

<templateis='dom-repeat'items="{{currentPlan.functionalities}}"><divclass="resourceRow rowParent"><divclass="functionIconContainer columnParent"><iron-iconicon$="your-iconset-name:{{item.id}}"></iron-icon></div></div></template>

Solution 2:

Ok, not sure if this really counts as an answer, but it fixes my immediate problem. I've attached an on-dom-change event handler to the dom-repeat block, which gets called on well, DOM changes. Then I loop through each icon container and set its innerHTML to itself. I don't know what it does, but it somehow forces a re-evaluation of that part of the DOM, causing my icons to show up. It's the simplest of code:

Baca Juga

_forceRedraw: function(){
 var functionIcons = document.querySelectorAll('div.functionIconContainer');
  _.each(functionIcons, function(iconContainer){
    iconContainer.innerHTML = iconContainer.innerHTML;
  })
}

'Lo, it works!

Solution 3:

A workaround is to add the attribute statically in addition to the binding

<svg><usexlink:href=""xlink:href$="{{ _getIconURL(item.id) }}"/></svg>

Polymer has issues with creating the attribute, updating it works fine though.

Solution 4:

This is a duplicate of: Polymer (1.0) - dynamic use xlink:href$ inside template not working properly

This is a Polymer bug, filed as issue #3060.

JavaScript Test

Svg Tags Within Polymer Dom-repeat

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Svg Tags Within Polymer Dom-repeat"