[icon] CSS properties relating suggested semantic HTML element <icon>

This is 1/3 of the original topic of the CSS isn’t used for icons topic. I took the liberty to use SebastianZ’s list of downsides of current implementation.

The idea behind this is to start using proper ways of handling icons instead of other “hackish” ways of doing it. Consider the three main ways of using icons (font-based, svg-based, bitmap-based):

1. Font-based icons / icon fonts (There’s a great article about why icon fonts are often considered hacks written by Tyler Sticka back in 2015.)

• Accessibility issues
• Error prone (because of relying on specific Unicode characters referring to specific icons)
• Poor fallbacks

2. SVG icons

• Styling only really possible when embedded in HTML (discussion on the WICG)
• Alignment within text difficult (discussion on the CSSWG 1)

3. Pixel image icons

• No styling possible
• Alignment within text difficult
• Poor display on zooming or high dpi displays

So given these shortcomings I suggest the following. And this particular thread is about the CSS properties relating the <icon> element.

.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...
}

• Simple shapes created using semantic coding (line, circle, star etc.)
• SVG path for more complex shapes.
• Placement/rotation/size etc is done using tranform.
• Fill-color is used to fill the CLOSED shape with a color.
• Color is used to color the path/edge/open loop.
• 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.