https://www.polymer-project.org/0.5/docs/elements/core-iconset-svg.html

[ebidel]

From @gertcuykens on March 21, 2015 23:57

https://www.polymer-project.org/0.5/docs/elements/core-iconset-svg.html

The fat lady is supposed to sing the song not reverse engineer it :P

Here is what your average Polymer user will think.

Summary
The core-iconset-svg element allows users to define their own icon sets that contain svg icons. The svg icon elements should be children of the core-iconset-svg element. Multiple icons should be given distinct id's.

So far so good, I understand this :)

Using svg elements to create icons has a few advantages over traditional bitmap graphics like jpg or png. Icons that use svg are vector based so they are resolution independent and should look good on any device. They are stylable via css. Icons can be themed, colorized, and even animated.

Blablabla but i am not complaining just saying you don't need to explain svg

Example
...

Nice clean straight forward, and now the bad stuff

This will automatically register the icon set "my-svg-icons" to the iconset database. To use these icons from within another element, make a core-iconset element and call the byId method to retrieve a given iconset. To apply a particular icon inside an element use the applyIcon method. For example:

iconset.applyIcon(iconNode, 'car');

Wooooooaw hold on ...database??? ...iconNode??? ...iconset.applyIcon(iconNode, 'car');??? What thats it? Where is the rest?

Pushing demo button

<template is="auto-binding">
    <div class="embiggen">
      <template repeat="{{icon in icons}}">
        <core-icon icon="{{icon}}"></core-icon>
      </template>
    </div>
    <core-meta id="meta" type="iconset"></core-meta>
  </template>
  <script>
    addEventListener('template-bound', function(e) {
      var template = e.target;
      var setName = 'svg-sample-icons';
      var icons = template.$.meta.byId(setName).iconNames;
      template.icons = icons.map(function(ic){ return setName + ':' +ic });
    });
  </script>

Aaaa crap I give up, clearly somebody had to deliver a baby or something while writing this part of the documentation :P

Copied from original issue: Polymer/docs#971

[ebidel]

From @arthurevans on March 22, 2015 0:46

:) sorry Gert. Thanks for the detailed report, we'll see if we can make this one a little more helpful.

[ebidel]

From @arthurevans on March 22, 2015 0:46

:) sorry Gert. Thanks for the detailed report, we'll see if we can make this one a little more helpful.

[ebidel]

From @gertcuykens on March 22, 2015 0:57

On a side node the new Show inherited function is a big improvement :) but i would like to see a class= block too please

[ebidel]

From @gertcuykens on March 22, 2015 1:16

Also some more information about iconSize please because i can't figure out how to scale this? I only see a part of the icon button?

        <core-iconset-svg id="gender-icons" iconSize="24">
          <svg viewBox="0 0 24 24" width="24px" height="24px">
            <defs>

                <g id="female" transform="translate(-348.7552,-478.0905)">
                    <g id="g3773" transform="matrix(1.071197,0,0,1.075147,-13.30677,-36.99488)">
                      <path
                         d="M 176 33 A 11 11 0 1 1  154,33 A 11 11 0 1 1  176 33 z"
                         transform="matrix(1.540096,0,0,1.5384,118.8893,454.0543)"
                         style="color:black;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:black;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                         id="path3939" />
                      <path
                         d="M 373.00525,521.74399 L 373.00525,543.28159"
                         style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:black;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                         id="path3941" />
                      <path
                         d="M 363.76467,534.05119 L 382.24582,534.05119"
                         style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:black;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                         id="path4816" />
                    </g>
                </g>

                <g id="male" transform="translate(-348.7552,-478.0905)">
                    <g id="g1872" transform="matrix(1.948116,0,0,1.937312,-342.4303,-460.0101)">
                      <path
                         d="M 387.95009,489.60348 L 378.66214,498.89143"
                         style="opacity:1;color:black;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:black;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                         id="path26867" />
                      <path
                         d="M 49.396475 36.70454 A 15.623922 16.319134 0 1 1  18.14863,36.70454 A 15.623922 16.319134 0 1 1  49.396475 36.70454 z"
                         transform="matrix(0.48802,0.48802,-0.467594,0.467594,371.6094,473.1357)"
                         style="opacity:1;color:black;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:black;stroke-width:4.44071579;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                         id="path26871" />
                      <path
                         d="M 379.92823,489.70212 C 387.842,489.70212 387.842,489.70212 387.842,489.70212 L 387.842,497.61589"
                         style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                         id="path27759" />
                    </g>
                </g>

            </defs>
          </svg>
        </core-iconset-svg>

[ebidel]

From @gertcuykens on March 22, 2015 1:31

The only way i can make it fit 24x24 is if i do it like this

<g id="shape">
      <rect x="0" y="0" width="24" height="24" />
      <circle cx="24" cy="24" r="24" />
 </g>

[ebidel]

From @gertcuykens on March 22, 2015 1:44

When i do src="male.svg" instead of icon="gender-icons:male" it does scale it automaticly?

[ebidel]

From @gertcuykens on March 22, 2015 2:38

Aaaa now i get it... i need to change iconSize="75", not the 24 button size.

[ebidel]

From @gertcuykens on March 22, 2015 2:44

The example in the doc is wrong also, it needs to be iconSize="50" not 24 :P

<core-iconset-svg id="my-svg-icons" iconSize="24">
  <svg>
    <defs>
      <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
      </g>
    </defs>
  </svg>
</core-iconset-svg>