12

I have a button set up like this:

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

My css classes look like this:

.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' with css if it is an SVG? I have tried adding fill classes to the svg, color classes, background-classes, etc.

Here is a plunk: http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Improve this question
7
  • 1
    That is not possible when using SVG as a background image. css-tricks.com/using-svg
    – CBroe
    Commented Jan 18, 2016 at 16:11
  • Typically you would use an icon font for this rather than an svg.
    – Brian Glaz
    Commented Jan 18, 2016 at 16:11
  • @CBroe What would be the best approach to using an svg as an icon then? Do I HAVE to use inline svg? Is there any way I can use my current set up by using a class ?
    – developthewebz
    Commented Jan 18, 2016 at 16:14
  • @BrianGlaz I have my own set of custom icons that I am using as svg's... What would be a better approach to using them like this, then?
    – developthewebz
    Commented Jan 18, 2016 at 16:28
  • This should be helpful: rafaltomal.com/how-to-create-and-use-your-own-icon-fonts
    – Brian Glaz
    Commented Jan 18, 2016 at 16:33

3 Answers 3

Reset to default
5

If you're happy to add one extra class (for the color of the plus icon) then here's a CSS-only 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>

Improve this answer
0
1

I ended up here looking for a way to color a svg icon. The most voted answer didn't helped me so after some googling i came across to this interesting codepen.

Long story short i colored my svg icon using 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:

Not working with IE.

Improve this answer
0

You have to put the svg inline but consider using the <use> element instead so you can use an icon multiple time by referencing it:

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

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.