1

Currently I create buttons with icons by using the button's background, like in my example (this is probably the reason for my problem).

I would like to know if it is possible to change the colour of the icon from the CSS? Because at the moment we have to save the same icon multiple times for different colors (black, white, colored versions etc.)

If this is not possible and I have to use , could someone please show me an example of making an svg type button and how to then change it's color.

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}
<button class="btn-icon"></button>
Paul Kruger
  • 2,094
  • 7
  • 22
  • 49
  • 2
    this may helps : https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/ – Pranav C Balan Aug 08 '18 at 09:19
  • I would recommend to build a iconfont out of the svg, then you will be able to change its color with css. I currently do this with gulp. Before I made some decent experience with icomoon.io – Marcel Schmid Aug 08 '18 at 09:21

2 Answers2

-1

For Adel's answer in this question Modify SVG fill color when being served as Background-Image

This seem to be an amazing solution for me:

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}
Paul Kruger
  • 2,094
  • 7
  • 22
  • 49
-2

I think you should used

background-color: yellow;

In CSS

Ye Yint
  • 27
  • 3