How to set a External SVG color in HTML using CSS?

This thread is old but I wanted to share my solution, based on SVG filters. You just need to define a feColorMatrix filter as you want and apply it to the external image. See example below for more details.

Compatible with any browsers that can handle SVG.

<svg width="100%" height="100%" class="draggable">
  <defs>
    <filter id="customColor1">
      <!-- Match hex color for #50A -->
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0.3333333333333333 0 0 0 0 0 0 0 0 0 0.6666666666666666 0 0 0 1 0"
      ></feColorMatrix>
    </filter>
    
    <filter id="customColor2">
      <!-- Match hex color for #0F0 -->
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0"
      ></feColorMatrix>
    </filter>
  </defs>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" width="50" height="50"></image>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor1)" width="50" height="50" x="100"></image>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor2)" width="50" height="50" x="200"></image>
  
</svg>

[BONUS]

// A little helper to generate matrix color from source and destination colors
// To easily dive in : https://codepen.io/jacobberglund/pen/ORNQAr
// To understand what's going on here read this article by A List Apart
// https://alistapart.com/article/finessing-fecolormatrix/

interface RgbColor {
  /** Values are in percent (ex: 255,127,0,255 => 1,0.5,0,1) */
  r: number;
  g: number;
  b: number;
  a: number;
}

export class ColorMatrixHelper {
  public static getMatrix(hexColor: string) {
    const rgbColor: RgbColor = ColorMatrixHelper.hexToRgb(hexColor);
    return ColorMatrixHelper.computeMatrixColor(rgbColor);
  }

  // Inspired by this answer : https://stackoverflow.com/a/5624139/11480016
  private static hexToRgb(hex3or6): RgbColor {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    const hex6 = hex3or6.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex6);
    const base = 1 / 255;
    return result
      ? {
          r: parseInt(result[1], 16) * base,
          g: parseInt(result[2], 16) * base,
          b: parseInt(result[3], 16) * base,
          a: result[4] ? parseInt(result[4], 16) * base : 1,
        }
      : null;
  }

  private static computeMatrixColor(rgbColor: RgbColor): string {
    let matrix;
    if (rgbColor) {
      // Ignore original colors and apply the new one
      matrix =
        `0 0 0 0 ${rgbColor.r} ` + // Red
        `0 0 0 0 ${rgbColor.g} ` + // Green
        `0 0 0 0 ${rgbColor.b} ` + // Blue
        `0 0 0 ${rgbColor.a} 0`; // Alpha
    } else {
      // Identity (keep orignal colors)
      matrix =
        `1 0 0 0 0 ` + // Red
        `0 1 0 0 0 ` + // Green
        `0 0 1 0 0 ` + // Blue
        `0 0 0 1 0`; // Alpha
    }
    return matrix;
  }
}

CSS does not apply cross document and you've two documents here heart_border.svg and the container html document.

You need to include the CSS in heart_border.svg e.g. by adding a <link> element or an <xml-stylesheet> processing instruction or by adding it inline in that file via a <style> element.

Alternatively if you add the SVG inline in the html document itself so that you only have one document the CSS will then apply.