1 2<!--- 3 4This README is automatically generated from the comments in these files: 5iron-iconset-svg.html 6 7Edit those files, and our readme bot will duplicate them over here! 8Edit this file, and the bot will squash your changes :) 9 10The bot does some handling of markdown. Please file a bug if it does the wrong 11thing! https://github.com/PolymerLabs/tedium/issues 12 13--> 14 15[](https://travis-ci.org/PolymerElements/iron-iconset-svg) 16 17_[Demo and API docs](https://elements.polymer-project.org/elements/iron-iconset-svg)_ 18 19 20##<iron-iconset-svg> 21 22The `iron-iconset-svg` element allows users to define their own icon sets 23that contain svg icons. The svg icon elements should be children of the 24`iron-iconset-svg` element. Multiple icons should be given distinct id's. 25 26Using svg elements to create icons has a few advantages over traditional 27bitmap graphics like jpg or png. Icons that use svg are vector based so 28they are resolution independent and should look good on any device. They 29are stylable via css. Icons can be themed, colorized, and even animated. 30 31Example: 32 33```html 34<iron-iconset-svg name="my-svg-icons" size="24"> 35 <svg> 36 <defs> 37 <g id="shape"> 38 <rect x="12" y="0" width="12" height="24" /> 39 <circle cx="12" cy="12" r="12" /> 40 </g> 41 </defs> 42 </svg> 43</iron-iconset-svg> 44``` 45 46This will automatically register the icon set "my-svg-icons" to the iconset 47database. To use these icons from within another element, make a 48`iron-iconset` element and call the `byId` method 49to retrieve a given iconset. To apply a particular icon inside an 50element use the `applyIcon` method. For example: 51 52```javascript 53iconset.applyIcon(iconNode, 'car'); 54``` 55 56 57
){kind=link}