Insert an svg as a background image and be able to modify its fill

background-svg.scss

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@mixin background-svg($color) {
  // Firefox doesn't like un-encoded characters
  // So we need to encode #
  $color: str-replace($color, '#', '%23');
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'><defs><style>.secondary-brand-color{fill:#{$color};}</style></defs><title>ico-check--colored</title><polygon class='secondary-brand-color' points='15.167 0 7.333 8.458 3.5 4 0 7.333 7.25 15 19 3.042 15.625 0 15.167 0'/></svg>");
}