How to link to Polymer icons in CSS
I was wondering if the Polymer core-icons.html file could be used to display an icon as a background image in CSS. I want the icon reference in my stylesheet to look like this:
#arrow-forward {
background-image: url(route to polymer icon/arrow-forward.svg);
}
So far I have tried this with no success:
#arrow-forward {
background-image: url(bower_components/core-icons/core-icons.html/arrow-forward.svg);
}
I want to do this so that I can easily create more custom controls for image sliders and other plugins.
source to share
You cannot directly link to core-icons
(or the upcoming one iron-icons
) for use in CSS because they do not exist as base64 files / data. If you look in the source code core-icons.html
, you can see why your link is not working; icons are svg paths:
<!--
...
@group Polymer Core Elements
@homepage polymer.github.io
-->
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
<core-iconset-svg id="icons" iconSize="24">
<svg><defs>
<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
...
I want to do this so that I can easily create more custom controls for image sliders and other plugins.
The polymeric worldview is that elements are composite and core-icon
not an exception, which allows you to accomplish your goal without using svg directly in your css.
You can create a style core-icon
:
<style>
core-icon[icon="cancel"] {
color: red;
width: 48px;
height: 48px;
}
</style>
<core-icon icon="cancel"></core-icon>
You can also create other elements with core-icon
:
<core-menu-button icon="menu">
<core-item icon="settings" label="Settings"></core-item>
</core-menu-button>
This is only for the surface and I highly recommend reading the primary icon documentation for more examples.
source to share