How to create a Polymer icon set

Polymer elements come out of the box with amazing icon sets for nearly every situation. And for the corner cases, there is the <iron-iconset-svg> element to create your own icon set.

With these four steps you can use your own icons with the Polymer elements:

Step 1: Create SVG file

Save your icon in SVG format: For the remainder we use this ruler icon from iconmonstr.com (check out their other great icons!)

Step 2: Create skeleton for the icon set

Create a new file (for the remainder my-icons.html) which declares the future ruler icon within the <iron-iconset-svg> element:

<link rel=”import” href=”../iron-iconset-svg/iron-iconset-svg.html”>
<iron-iconset-svg name=”my” size=”24">
<svg><defs>
<g id="ruler">
</g>
</defs></svg>
</iron-iconset-svg>

Step 3: Copy over icon content

Open the SVG file and copy the content within the <svg> tag:

<?xml version=”1.0" encoding=”utf-8"?>
<! — License Agreement at http://iconmonstr.com/license/ →
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" x=”0px” y=”0px”
 width=”512px” height=”512px” viewBox=”0 0 512 512" style=”enable-background:new 0 0 512 512;” xml:space=”preserve”>
<path id=”ruler-19" d=”M135.833,393.334c0,9.488–7.678,17.166–17.167,17.166c-9.488,0–17.167–7.678–17.167–17.166
 c0–9.489,7.678–17.168,17.167–17.168C128.155,376.166,135.833,383.845,135.833,393.334z M462,324.666V462H50V50h137.333v274.666H462
 z M84.333,324.666H153v-34.332h-34.333v-17.168H153v-34.333h-34.333v-17.167H153v-34.333h-34.333v-17.167H153v-34.333h-34.333
 v-17.167H153V84.333H84.333V324.666z M427.666,359h-34.332v51.5h-17.168V359h-34.332v34.334h-17.168V359h-34.332v51.5h-17.168V359
 h-34.333v34.334h-17.167V359h-34.333v51.5h-17.167V359H84.333v68.666h343.333V359z”/>
</svg>

Also take a note of the icon size (here: 512).

Now, paste the content into the skeleton and adjust the icon size:

<link rel=”import” href=”../../bower_components/iron-iconset-svg/iron-iconset-svg.html”>
<iron-iconset-svg name=”my-set” size=”512">
<svg><defs>
<g id="ruler">
<path id=”ruler-19" d=”M135.833,393.334c0,9.488–7.678,17.166–17.167,17.166c-9.488,0–17.167–7.678–17.167–17.166
 c0–9.489,7.678–17.168,17.167–17.168C128.155,376.166,135.833,383.845,135.833,393.334z M462,324.666V462H50V50h137.333v274.666H462
 z M84.333,324.666H153v-34.332h-34.333v-17.168H153v-34.333h-34.333v-17.167H153v-34.333h-34.333v-17.167H153v-34.333h-34.333
 v-17.167H153V84.333H84.333V324.666z M427.666,359h-34.332v51.5h-17.168V359h-34.332v34.334h-17.168V359h-34.332v51.5h-17.168V359
 h-34.333v34.334h-17.167V359h-34.333v51.5h-17.167V359H84.333v68.666h343.333V359z”/>
</g>
</defs></svg>
</iron-iconset-svg>

Step 4: Use the icon

Finally, you can import the icon set into your component and use the newruler icon:

<link rel="import" href="innovation-icons.html">
<iron-icon icon="my:ruler"></iron-icon>

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.

Photo: Kristian Bjornard