[css-icon] CSS isn't used for icons - it should be

[Grovkillen]

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.

Font Awesome has become defacto standard for icons which seems a bit weird since we should have a standard for icons and not rely on third party aid. Font based icons are a hack, not a standard in my opinion. So... to get rid of static (but often 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. Not that I suggest all should create icons this way but as a proof of concept. 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 and even be animated. 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: iconbg;
  icon-layer-0: shadow;
  icon-layer-1: graphics;
  icon-layer-n: ....
  icon-badge: roundbadge;

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

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

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

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

@icon-layer iconbg {
  ...CSS stuff
  ...SVG paths
}
@icon-layer 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 now combine multiple "keyframes" which are defined in the @icon-layer part of the CSS to create icons. The badge can be set at one place and not on individual icons, the background could be round or square depending on the radius of the background element and so on. Screen readers would be helped upon reading an icon element and read out "icon" + the title of the element.

The icon element is by design always NxN in size and will (if not override) obey the size (height) of the font scope it's part of. Internal origo (for it's own shapes etc) should be defined by default from 0,0=center-center and then you can place the different layers in arrays X&Y...-X&-Y and orthogonality (R&Angle). Overflow is by design hidden within the NxN. By design you're not allowed to have more than one closed figure per icon-layer. The closed area is colored by the ...fill-color attribute and the boundary is colored by the ...-color attribute. I.e. an open figure will not be affected by setting the fill-color attribute. icon-layer will not place the shape/figure, by default it will be placed symmetrical in the origo of the icon. To move it you need to use the ...-transform attribute. Arrays of a layer is done this way as well.

BAD IDEA or GREAT IDEA?

PS. a battery icon (as an example) doesn't have to have multiple icons to represent charging, battery level etc. it could just adjust a attribute value or add/remove a class etc. As an example you may add the class "one, two, three, four, or five" to have the wifi signal strength icon on my above linked site to have the bars filled in. Change the attribute for signal strength and you'll see that the dBm is updated in the icon as well.

[Crissov]

Iʼm about to propose a box layering mechanism using pseudo-elements which may help a bit.

[Grovkillen]

WICG discussion thread:

https://discourse.wicg.io/t/css-isnt-used-for-icons-it-should-be/3892

[Grovkillen]

The WICG discussion now have three child threads:

[icon] Semantic HTML element HTML

[icon] CSS properties relating suggested semantic HTML element CSS

[icon] Layers @rule to create icons based on multiple "keyframes" CSS