How to reference Polymer icons in CSS -


I was wondering if the polymer core-icons to display an icon in CSS as a background-image . . I want to reference an icon in my stylesheet like this:

  # arrow-forward {background-image: url (path to polymer icon / arrow-forward.svg); }   

So far, I've tried it without success:

I want to do this so that I can easily create more customized controls for image sliders / other plugins

You can use core-icon (or iron-icon for use in the upcoming CSS) because they are file / base 64 data are not present in the form. If you look in the source code for core-icons.html , you will see why your reference does not work; Icon SVG paths are:

    & lt; g id =" accessibility "& gt; & lt; ; Path d = "M12 2c 1.1 0 9 9" 2 2-9 2 2-2 -2-2-9-2-2 .9-2 ​​2-2zm9 7h-6v13h-2 v-6-2 v6H9V9H3V7h18v2z "/> & lt; / g & gt; ; ...   

I want to do this so that I can easily create more customized controls for image sliders / other plugins.

The world view of polymers is that the elements are included and core-icon is no exception, so that you can accomplish your goal without using STV in your CSS.

You can type style core-icon : & lt; style & gt; core-icon [icon = "cancel"] {color: red; width: 48px; height: 48px;} & lt; / style & gt; & lt; core- Icon icon = "cancel" & gt; & lt; / core-icon & gt;

You can also write other elements with the core-icon Are:

  Core-Menu-Button icon = "Menu"> Core item item = "Settings" label = "Settings" & gt; & lt; / Core-item & gt; & lt; / core-menu button & gt;   

It touches only on the surface, and I highly recommend reading, which gives further examples. is.

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -