Better handling of inverted icons

[pixelipo]

My thoughts related to #5450 - which is just one example of problems with icons in NC.

I don't think using icon-more-white to display dark variant of the icon is a very elegant approach. I'm wondering if we can come up with a better solution for such situations ( #5450 is only an example). Here are several proposals that we might want to consider in future releases:

1. SVG: use inline SVG as icon source (many pros and cons, I'm not going to list them here), set fill in CSS as needed
2. JS: toggle between icon-more and icon-more-white classes using JS
3. CSS: use CSS filter: invert(100%) property, which is quite nicely supported already

My personal favourite of those is fill, but filter() would also be neat. Both of these would allow us to deprecate a considerable amount of existing icons. They would also give us possibility to theme icons (I guess folder icon is the only obvious candidate here).
SVG-based solution would additionally allow us to have icons-within-icons without maintaining a separate asset, such as core/img/filetypes/folder-public.svg - but it might not be feasible just yet 😢

I would like to hear your thoughts @nextcloud/designers @nextcloud/theming

[jancborchardt]

Important is that we keep supporting the browsers we need to support.

I agree with the methods you prefer @pixelipo. Maybe @juliushaertl @nextcloud/designers @nextcloud/javascript have more input?

(Btw @pixelipo this is not a papercut, which is a user-facing small issue - it rather is technical debt. :)

[juliusknorr]

Important is that we keep supporting the browsers we need to support.

Is there a note somewhere what browsers are currently supported? Cannot find it atm.

CSS: use CSS filter: invert(100%) property, which is quite nicely supported already

We already use this for the theming app, so i see no problem there. Seems to be the best solution to me.

[MorrisJobke]

Is there a note somewhere what browsers are currently supported? Cannot find it atm.

IE11+ and the current versions of the others usually (+ the LTS versions of those browsers).

[pixelipo]

IE11 is at ~3.3% global use. In that case, this idea should be put on hold until Edge takes over IE11 or figure out some smart IE fallback

[Espina2]

The first one are the better solution, less http requests, no longer need to be pure black ou pure white, we can change it to wherever they want.

[MorrisJobke]

IE11 is at ~3.3% global use. In that case, this idea should be put on hold until Edge takes over IE11 or figure out some smart IE fallback

Usually IE11 is not that hard to convince. But I guess it's not an option to drop it, because there are some customers demanding it AFAIK. cc @karlitschek