Can't set custom css properties on individual feather icons

[ghost]

I need to change the size and color of some icons, but it doesn't seem to work, I tried adding a style attribute that changes the width and height with no success. I also tried adding #element .feather to my css without it working.

Does anyone know a workaround?

[moeenio]

Are you using the JS library, with feather.replace? If yes, make sure your styles are targeting SVG elements.

[ghost]

Are you using the JS library, with feather.replace? If yes, make sure your styles are targeting SVG elements.

Yes, I'm using the JS library. I have tried #element .feather and #element svg. None of them seem to work :/

[moeenio]

Make sure your DOM is what you expect it to be (use your browser's devtools)

[ghost]

Make sure your DOM is what you expect it to be (use your browser's devtools)

oh my god I looked up some stuff and got this article, and apparently #id .class completely differs from #id.class

I fixed it by removing the space between #element and .feather in my css file

[moeenio]

Yup, they differ. #id .class will select elems with this class that are inside an element with this id; #id.class selects the element with both this id and class.