Add icon-black-white mixin to automatically generate icon classes

[juliusknorr]

This will fix #8702 by automatically generating proper classes for black and white icons.

@include icon-black-white('close', 'actions', $color-black, 1, true); will generate the following css:

.icon-close {
  background-image: var(--icon-close-000);
}
.icon-close-white, .icon-close.icon-white {
  background-image: var(--icon-close-fff);
}

The css vars are set with the correct URL as this was done in #9984

What do you think about that @skjnldsv @pixelipo @nextcloud/designers

[MorrisJobke]

Works in IE11 fine 👍

[juliusknorr]

Ok let me adjust it that way for the other icon classes as well 😉

[juliusknorr]

Ready for review. I moved all icon classes that match the pattern, however there are some that don't so I kept them unchanged for now, so we don't break anything at this point. We should consider unifying this for 15 maybe, but I think we should announce that early, since we don't have any process for deprecating css classes.

I've tested this in Chrome, Firefox and IE11. Drop shadows are also kept on icons which use it, so the look is still the same for apps like talk that use the server icons.

[MorrisJobke]

Tested and now icons work in IE11 for the gallery 👍