原理：通过filter属性，将图片中的非透明像素生成投影，然后设置颜色即可。
为了能够方便的控制颜色：在HTML中将图片加一层包裹，设置超出隐藏，将图片的投影设置偏移。然后在需要改变图片颜色的时候，将图片相对定位，移出包裹层，让投影代替它的位置。
设置透明border是因为图片被overflow:hidden后，那么它的投影就消失了。所以需要用透明的border保留它在文档中的位置。

HTML

<div class="icon-content">
  <div class="icon icon-change"></div>
</div>

CCS

.icon-content{
  width: 20px;
  overflow: hidden;
}
.icon{
  width: 10px;
  height: 10px;
  background: url(icon.png) no-repeat;
  background-size: contain;
}
.icon-change{
  position: relative;
  left: -20px;
  border-right: 20px solid transparent;
  filter: drop-shadow(20px 0 color);
}