Everytime you want to use an icon you write
<svg class="icon IconName"> <use xlink:href="#iconId"></use> </svg>
Styling the icon with CSS is limited because you can't access elements inside the Shadow DOM created by the
/deep/ combinator used to dive into Shadow DOM isn't working in Chrome Canary with SVGs (as time of writing).
You can track this issue here
The good part: It is possible to style one color of an icon using the
But what if you want to style more than one color in an SVG?
currentColor To The Rescue
Ever heard of the special
currentColor value? It's basically a CSS variable that contains the current color set by the
With that in mind we can use the
color property to change two colors inside the SVG icon.
I found this little trick while creating this pen.
There I used the
fill property to controll the background circal and
color to color the S-Shape.
I think the /deep/ combinator is the way we will be doing this in the futur but untill than we have to work around this.