SVG tag doesn't work within polymer component in Firefox

Question

Here is an example: http://miriti.ru/svgtest/ If you\'ll look at this example in any browser you will see two grey squares with green circles (labled \"Symbol\") inside. Exc

Answer 1

Using SVG sprites I ran into issues that are similar to the one you describe but not the same. So what I propose is not exactly a solution to your problem, however you could avoid such issues altogether by 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')

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

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:

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