<style>
.icon-color{
    display: inline-block;
    width: 144px;
    height: 144px;
    
    overflow: hidden;
}
.icon-color:after{
    content: ‘‘;
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: url(‘https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba?w=144&h=144&f=png&s=2780‘) no-repeat center / cover
 
;
    filter: drop-shadow(144px 0 0 #42b983);
}
</style>

<i class="icon-color"></i>

使用 CSS3 濾鏡 filter 中的 drop-shadow。

1. drop-shadow 濾鏡可以給元素或圖片非透明區域添加投影
2. 將背景透明的 PNG 圖標施加一個不帶模糊的投影，就等同於生成了另外一個顏色的圖標
3. 再通過 overflow:hidden 和位移處理將原圖標隱藏

PNG 格式小圖標的 CSS 任意顏色賦色技術