SVG fill color

You can easily set the fill color of an svg by using it as a mask.

by nevkatz

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://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_done_black_24px.svg) no-repeat center;
}

.icon {
  width: 24px;
  height: 24px;
  background-color: green;
  -webkit-mask: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_done_black_24px.svg) no-repeat center;
  mask: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_done_black_24px.svg) no-repeat center;
}