@violetto This isn't possible with the current implementation of SVG icons, we'd need to go for an inline SVG solution, where we can use the CSS fill property on those SVGs.

In T114044#1744377, @Volker_E wrote:

@violetto This isn't possible with the current implementation of SVG icons, we'd need to go for an inline SVG solution, where we can use the CSS fill property on those SVGs.

We already generate a grey and green variant of this icon. It's already used by the non-constructive disabled variant of the widget:

Seems like this is simply a selector issue. The constructive selector is overriding the disabled selector. If we give the latter more weight, it should resolve itself.

@Krinkle It's not the selector only, it's the way OOjs UI connects the icon variants to the selectors. It's all done in a build step from JSON files. https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/src/themes/mediawiki/icons.json;7e71548b739e8a70f9136f706c61f6baf550c0d8$68
Without explicitly defining "disabled" as variant and programmatically adding that variant class to the corresponding element it's not changeable by selector.

Change 272626 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Disabled buttonElement icon should be gray

https://gerrit.wikimedia.org/r/272626

Patch adds filter: grayscale() to icon – currently available in Firefox 35+ and Edge behind flag. Blink doesn't support filters on SVGs yet.

Change 272626 merged by jenkins-bot:
MediaWiki theme: Disabled ButtonElement icon should not be colored

https://gerrit.wikimedia.org/r/272626