How can I get Polymer to treat my custom icons the same way as their own?

I'm trying to find a clever way to use the tag with my own svg icons so that I can use the "fill: currentcolor;" css property.

Using their inline icons, for example: <core-icon icon="android"></core-icon>

generates all svg for the icon, but using my own icon: <core-icon src="symbols/arrow-up.svg"></core-icon>

only generates a div with an svg background. Check out the screenshot here: http://i.imgur.com/6VTlGiN.png

It would be great if I wrote <core-icon icon="arrow-up"></core-icon>

for my own badge.

Thank!

+3


source to share


2 answers


You can use core-iconset-svg

to create your own set of icons. Here's an explanation: https://www.youtube.com/watch?v=xfiOJP8vuX4&index=2&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN



+3


source


I suggest you create your own Iconset element like https://github.com/Polymer/core-icons/blob/master/device-icons.html , which makes using your custom icons a lot easier.



+2


source







All Articles