I'm trying to color the utility "up" and "down" arrows that SLDS provides. I've confirmed that my CSS selector is correctly selecting the SVG icon in my browser console $$('.down svg'), but the fill is not applying to the svg.
Any thoughts? Is there something special I need to do?
Thanks
#LWC component
<lightning-icon class="down" icon-name="utility:down" size="x-small"></lightning-icon>
#CSS
.up svg {
fill : green;
}
.down svg {
fill : red;
}