Change 324370 had a related patch set uploaded (by Jdlrobson):
Hovering over links in menu should change link/icon to blue

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

@Jdlrobson I know that the patch set is the only technically close-to-complete solution so far, but I've told my concerns on the patch set and in person. From a maintenance perspective I think the proposed solution is over-engineered.
Given that we're talking about very little (as in file size) PNGs I would rather want to see this moving forward and include the icons similar to how they are included now. The color change is IMHO more important than the (small) performance impact we try to avoid. That doesn't mean, that we shouldn't find a better solution, I just don't feel the one real good solution is on the horizon and we shouldn't stop UI evolution for very little difference in impact.

I had thought that ResourceLoaderImage module doesn't support icons that change colour on hover, but on closer inspection you can do:

		"skins.minerva.icons.images": {
			"class": "ResourceLoaderImageModule",
			"selector": ".mw-ui-icon-{name}:before",
			"images": {
				"notifications": "resources/skins.minerva.icons.images/bell.svg",
				"notifications:hover": "resources/skins.minerva.icons.images/hamburger.svg",

Is that the recommended way to do this?
I'll leave it to @bmansurov as tech lead if we want to pursue that type of solution.

Yes, that would work. @Nirzar, would you provide us with the icons in hover state? The icons we need the hover effect are at https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/tree/master/resources/mobile.mainMenu.icons

@bmansurov we have all the icons. We just need to change the fill state - so basically we'd have to clone every icon and change the fill colour.
This is what I mean by ResourceLoaderImage support is not great for this.
Alternatively I wonder if it's possible to setup a variant :hover ?

@bmansurov
Here are all icons

• all of them are cleaned SVGs without illustrator cruft in it
• all have 2 versions
• I removed anonymous.svg icon, you can use profile.svg for logged in and anon users. we can save on an icon by only showing one icon

@bmansurov doing what @Jdlrobson is also good option, you can use fill="#36C". the zip file also tries to match oojs ui icons with this. it's not a big deal if you replace files but if you don't want to, that's fine too.

@Nirzar, I thought you'd just give me the fill'ed versions. How are your icons different that that?

@bmansurov they are two states but while i was working on it i took care of a long lasting task about updating drawer icons to look like OOJS ui icons https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr

if we are touching them, might as well. but up to you if you are comfortable with that. the change is basically to 2-3 icons in it's path prop. nothing else has changed.

Please update the description to explicitly say which icons are changing.
Also a note that we shouldn't introduce new icon assets - instead we should be changing the fill on one single canonical asset.

@Jdlrobson

instead we should be changing the fill on one single canonical asset.

the zip file is one set with another set with fill property.

Change 324370 abandoned by Jdlrobson:
Hovering over links in menu should change link/icon to blue

Reason:
Not working on this anymore

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

This needs a recommendation from the frontend standards group. Otherwise I suggest we use the CSS filter mechanism.

@Volker_E can you summarise where we are with this task?