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
Post a Comment