[w3c/webcomponents] CSS isn't used for icons - it should be (#836)

I'm developing a new front-end for the IoT OS "ESP Easy" and we really don't want to have any dependencies. Thus I have created my own framework called "guiEasy" which consists of a plain CSS file. The idea is to have everything modular and thus all element styling depend on global and element based variables to manipulate the GUI. 

To get rid of static (but nice looking) font based icons and hard to tweak SVG based icons I stumbled upon this page:
https://cssicon.space/#/

It is a hackish way of creating icons using pure CSS and I have been starting to create icons this way. You may see how this is done here: https://grovkillen.com/guieasy

My idea is that CSS should be the main source of styling icons as well as everything else. That way the icons can adapt to not only color but form and style. If you mess around with the radius on the above site (main tab, radius=1 for very round style, radius=2...7 for semi round, radius=100 for sharp style) and you'll see that the icons themselves adapt to this style.

So my suggestion:

```
<icon>
<icon class=...>
<icon data-attribute=...>
... etc.
```
The above HTML element would be able to be styled using layers:

```
.classname {
  icon-background: iconbackground;
  icon-layer-0: iconshadow;
  icon-layer-1: icongraphics;
  icon-layer-n: ....
  icon-badge: roundbadge;

  icon-background-color: #...;
  icon-layer-n-color: #...;
  icon-badge-color: #...;

  icon-background-transform: XXXX;
  icon-layer-n-transform: XXXX;
  icon-badge-transform: XXXX;

  ... Adding more icon related CSS stuff here...
}

@icon iconbackground {
  ...CSS stuff
  ...SVG paths
}
@icon roundbadge {
  contents: attr(data-badge-number);
  ...CSS stuff
  ...SVG paths
}
```

The background is ALWAYS on bottom
The badge is ALWAYS on top

Badge = a notifying small element which could be used to show numbers of unread messages etc. It may fetch it's value from a set attribute.

You can by doing this combine multiple "keyframes" which are defined in the `@icon` part of the CSS.

BAD IDEA or GREAT IDEA?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/836