Coloring SVG URLs with css

Question

I have a button configured like this:

<button class="buttonclass"><i class="iconclass plus-icon"></i></button> 

My css classes are as follows:

 .buttonclass { width: 30px; height: 30px; text-align: center; position: relative; border-radius: 20px; background-color: #1DBE60 } .iconclass { width: 20px; height: 20px; margin: 7.5px; } .buttonclass .iconclass { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .plus-icon { content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg); } 

How can I change the color of the plus-icon using css if it is SVG? I tried adding padding classes to svg classes, colors, background classes, etc.

Here is the plunger: http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Answer 1

If you are happy to add one additional class (for the color of the plus sign), then there will only be a CSS solution using the currentColor CSS variable:

 .buttonclass { width: 30px; height: 30px; text-align: center; position: relative; border-radius: 20px; background-color: #1DBE60 } .iconclass { width: 20px; height: 20px; margin: 7.5px; } .buttonclass .iconclass { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .plus-icon { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="0" y="12" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="12" width="8" height="8" fill="rgb(29,190,96)" /></svg>'); background-color: currentColor; border: 1px solid rgb(29,190,96); border-radius: 15px; } .white { color: rgb(255,255,255); } .yellow { color: rgb(255,255,0); } .green { color: rgb(0,255,0); } 

 <button class="buttonclass"><i class="iconclass plus-icon white"></i></button> <button class="buttonclass"><i class="iconclass plus-icon yellow"></i></button> <button class="buttonclass"><i class="iconclass plus-icon green"></i></button> 

Answer 2

You should put svg inline, but instead use the <use> element so that you can use the icon several times referring to it:

http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Answer 3

I ended up finding a way to colorize the svg icon. The most voted answer did not help me, so after some search queries I came across this interesting codepen .

In short, I drew my svg icon with this css:

 .plus-icon { -webkit-mask: url('../images/plus.svg') no-repeat 50% 50%; mask: url('../images/plus.svg') no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; } .white { background-color: rgb(255,255,255); } 

Update:

Doesn't work with IE.