How to replace color of PNG image using CSS? [duplicate]

Question

I have an icon in a webpage:

<div class='icon-container'>
    <img src = "img/gavel3.png" class="gavel-icon" style='vertical-align:center;width:80px;'>
</div>

I'm trying to replace the black in this image with the color: #2a4f6c using CSS only. I tried to replace the black with this color using Photoshop, and it looks awful and grainy. Is a solution possible using pure CSS?

Image in question below.

Answer 1

Use the image as mask and you can do it:

.img {
  width:150px;
  height:150px;
  display:inline-block;
  background:red;
  -webkit-mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
          mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
}

img {
  width:150px;
  height:150px;
}

<div class="img"></div>
<div class="img" style="background:#2a4f6c"></div>
<img src="https://i.ibb.co/FhZb3Xs/CJcLK.png" >

Answer 2

You can't change the image color directly in css. (svg, icons can be possible) Use various filter to change color, change hue-rotate value in code to get various color;

.gavel-icon{
  filter: saturate(500%) contrast(800%) brightness(500%) 
      invert(80%) sepia(50%) hue-rotate(120deg); 
}