css改变透明背景png图片的图标颜色

<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>

<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

body {
padding: 100px;
}

.icon {
display: inline-block;
width: 32px;
height: 32px;
overflow: hidden;
/*background: lightcoral;*/
}

.icon-del {
background: url("delete.png") no-repeat center;
}

.icon > .icon {
position: relative;
left: -32px;
border-right: 32px solid transparent;/*必不可少*/
-webkit-filter: drop-shadow(32px 0 0 red);
filter: drop-shadow(32px 0 0 red);
}