SOURCE

document.getElementById('color').onchange = function(){
	var c = this.value;
	document.getElementById('icon').style.webkitFilter = 'drop-shadow('+c+' 20px 0)';
}

<div class="icon">
    <span class='icon' id='icon'></span>
</div>
<input type="color" id='color' />

div.icon{height:20px;width:20px;overflow: hidden;}
.icon .icon{width: 20px;height: 20px;display:block;position: relative;left: -20px;border-right: 20px solid transparent;
    background: url(https://coding-net-production-pp-ci.codehub.cn/0125037b-a9f9-4830-a0c9-6d4023795abf.png) no-repeat;-webkit-filter: drop-shadow(#000 20px 0);filter: drop-shadow(#000 20px 0);   
}