Changing color of SVG icon + CSS Sanitization

I have a range of SVG icons as file that I would like to use in various nodes within a go.Picture element. I also want the colors of these SVG to be able to change dynamically.
I found a solution to changing colors here: css - How to change the color of an svg element? - Stack Overflow, which involves wrapping the svg in an image and applying a css filter (filter - CSS: Cascading Style Sheets | MDN (mozilla.org)) element.

When I try to set this style inline, (i.e. create html image element ‘elem’, then set elem.style.filter = ‘…’ or elem.setAttribute(‘style’ …)) it does not work. When I log the ‘elem’, it appears to have removed the filter style altogether, but this does not occur for other inline styles. This method also works perfectly fine with the same svg icons but outside of the the go.Picture element.
I can only guess that there is some css sanitization going on in the background. Is there any way I can get around this?

For performance and rendering flexibility, everything in GoJS is drawn to an HTMLCanvasElement. You cannot use CSS styles or filters or execute any JavaScript in the SVG.

But I believe you could modify the SVG and then pass that to the Picture. It would not be particularly efficient though.

If you’re still looking to use CSS filters on pictures, there is now an undocumented filter property in 2.3.4, so you can set a value like:

{
  // other picture settings...
  filter: 'grayscale(100%)'
}

And it will make the Picture grayscale.

This is experimental, but many values work as expected.