Why isn't this simple color change of a Font Awesome SVG icon not working?

Question

I'm trying to change the color of a Font Awesome icon. I'm not using the font or the <i> markup. I'm using a downloaded .svg image file.

The SVG inside the file is pretty simple:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16"
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32
    32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84
    7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81
    0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98
    96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16
    16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg>

I was expecting that the fill="currentColor" setting inside the .svg file would allow the image to change color with simple CSS styling, but that doesn't seem to be the case. Do SVG images as files always behave as if currentColor is black? Is there a way around this?

<div>
  <img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← SVG image defaults to black<br>
  <div style="color: red"><img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be red</div>
  <img style="color: blue" src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be blue<br>
</div>
<div style="display: inline-block; color: green; width: 50px; height: 50px;">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16"
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32
32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84
7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81
0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98
96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16
16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg></div>
← Applying color works when using inline SVG instead of SVG image file

Answer 1

SVG files accessed as standalone external images (for instance <img> or background-image) have to be self-contained. Styling outside the file does not affect the SVG.

You can think of it as if it were just a PNG file.

Answer 2

This is using FontAwesome 6.4.2 (pro, but that should not matter).

I found that setting fill to "none" on the svg tag and both the stroke and fill attributes to "currentColor" on the path tag allowed me to change the color freely with CSS. I do so with a class on the tag containing the SVG, not the SVG tag itself, though I'd imagine that would work as well.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 512 512">
    <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path stroke="currentColor" fill="currentColor" d="...path info..."/>
</svg>

Alternatively, you can use the CSS filter setting, but that's less convenient to use in my opinion.