This will have to be uploaded in Gerrit and Melange as well (code actually does not need to be uploaded here, just the other two places).

Tested it works, will clean up and upload patch tomorrow. Couldn't use background-image-svg as it caused duplication of icons.

Final effect:

In T76513#802326, @Mattflaschen wrote:

This will have to be uploaded in Gerrit and Melange as well (code actually does not need to be uploaded here, just the other two places).

I saw that Melange has a URL option. So you don't actually need to upload to there. Just add the Gerrit URL to Melange.

In T76513#802746, @Mlawnik wrote:

Couldn't use background-image-svg as it caused duplication of icons.

Can you explain this problem? What browser did you test in?

Final effect:

As noted in Melange and T52843: Use consistent preferences icon, there are two different gears. The other one is at Special:Notifications.

The background-image-svg mixin does not have the attributes specified for this icon, such as no-repeat, which causes something like this:

I will upload a full photo with correct icons in a moment. I was testing on chrome but had cache issues while editing. Screenshot taken in firefox, will take final screenshots in both browsers.

Also, removed Preferences.png in /modules/special. The iconsnow reside in /modules/icons as:
Settings.svg
Settings14px.png
Settings19px.png

Gerrit changes:

https://gerrit.wikimedia.org/r/#/c/177269/

Change 177269 had a related patch set uploaded (by Nemo bis):
Fixed preferences icons to be consistent and be svg.

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

Patch-For-Review

Change 177269 abandoned by Catrope:
Fixed preferences icons to be consistent and be svg.

Reason:
This has since been fixed, see e.g. 0271cdd52dcc3d2f51f67cca2e942e95b4c3c859

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