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):
- 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
- SVG icons
- Styling only really possible when embedded in HTML (discussion on the WICG)
- Alignment within text difficult (discussion on the CSSWG 1)
- 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
- 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.
- Overflow is by design hidden within the icon element.