Como alterar a cor de um SVG com CSS

Gostaria de compartilhar com vocês uma dica de código para alterar a cor de um elemento, uma imagem, preferencialmente um arquivo SVG utilizando CSS.

Existem várias técnicas para se alterar a cor de um arquivo SVG utilizando CSS acredito que a mais conhecida seja FILL, mas para utilizar esse código CSS você tem que incluir o código SVG dentro do HTML, a técnica se chama Inline SVG, exemplo:

<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>

svg:hover {
  fill: red;
}

Mas existe outra técnica que eu gosto bastante que é utilizar FILTER, nesse caso você pode incluir a imagem dentro do HTML como um arquivo mesmo exemplo:

.icon {
  background-image: url(icon.svg);
}
.icon:hover{
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

Porém calcular corretamente o FILTER pode ser um problema, ou poderia ser um problema, felizmente alguém já desenvolveu um código para converter uma cor hexadecimal para a combinação do filtro, o crédito deste código vai para Barrett Sonntag.

See the Pen
CSS filter generator to convert from black to target hex color by Barrett Sonntag (@sosuke)
on CodePen.