In my react component I have a button:

<div>
  <img
    className={`prevent-select ${styles.svgButton}`}
    src="/svgs/button.svg"
    alt={t('ButtonKey')}
    title={t('ButtonKey')}
    onClick={onButtonClick}
  />
</div>

Svg file looks like this:

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24">
    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" fill="#000000"/>
  </svg>

Now I need to override the path fill (black) to white in when app theme changes. I started by trying to just override the fill always, but following doesn’t work in my .scss file. The style itself is used but the path fill doesn’t do anything.

.svgButton {
  border-radius: 50%;
  cursor: pointer;
  padding: 4px;
  margin-top: 8px;
  path {
    fill: white !important;
  }
}

How this should be overridden correctly?