SVG Color using by mask.

SVG Color using by mask.

by Ankit Patidar

HTML

Original:
<div class="original-icon"></div>
<br>
Custom:
<div class="icon"></div>

CSS

body {
  font-family: 'Roboto', sans-serif;
}

.original-icon {
  width: 24px;
  height: 24px;
  background: url(https://image.flaticon.com/icons/svg/483/483408.svg) no-repeat center;
}

.icon {
  width: 24px;
  height: 24px;
  background-color: red;
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/dev-lsquared-hub/cl/widgets/client/weather/static/svg/3.svg) no-repeat center;
  mask: url(https://s3-us-west-2.amazonaws.com/dev-lsquared-hub/cl/widgets/client/weather/static/svg/3.svg) no-repeat center;
}