Changing the color of an SVG icon
Today, for work, I had to change the color of an SVG icon from black
to red (#ff0000) when a certain event occurred. I used the img
element to display the SVG icon. Just adding a class with color set
to the aforementioned hexadecimal color code didn't work. So I Googled
and found an article called Change Color of SVG on
Hover by Chris
Coyier.
I decided to give the filter trick mentioned in this article a try and
used the recommended online
tool created by Barrett Sonntag
which calculates the correct filter settings. When the class got added
to the img element it indeed changed to red.