Lightning : Icon color is not changing using the fill CSS

Actually the issue is which element you are applying the "fill" property to. Meaning when you declare something like <lightning:icon class="icn" iconName="utility:favorite" size="small" />.

It gets rendered as follows

If you notice the "icn" is applied to the outer span container rather than svg itself. Hence you will have to do Something as follows to apply your custom styles. ( applying the css to the svg element using heirarchies )

By checking/copying the selector and scoping it down to the lightning-icon + my CSS class as follows you should be able to change the filling of the Icon easily.

.THIS lightning-icon.some-indicator > lightning-primitive-icon > svg > use{
    fill: green;
}

Also, note that the component itself accepts variants for "yellow, red and inverse (white).

<lightning:icon class="some-indicator" variant="warning" iconName="utility:up" size="small" alternativeText="metrics"/>

variant="Warning"

variant="Error"

Lightning:icon component

The variant changes the appearance of a utility icon. Accepted variants include inverse, warning and error. Use the inverse variant to implement a white fill in utility icons on dark backgrounds.

lightning-icon can inherit color from the container it's in using slds-current-color. Top answer likely won't work for out of the box components as there is a shadow root intervention. This should work for those:

CSS:

.make-this-dang-icon-blue {
    color: blue;
}

HTML:

<div class="make-this-dang-icon-blue">
  <lightning-icon class="slds-current-color" icon-name="utility:favorite"></lightning-icon>
</div>