Use first two letters of menu item as default icon

Refactor icon approach to inline SVGs instead of via CSS. This allows us to consolidate logic for both the icons and the default first two letters display, without having to do a lot of wonky CSS overrides. It also prevents the CSS from bloating each time a new icon is supported, and eliminates network requests.

Add aria-hidden to SVGs for accessibility. Hide these graphics from screen readers, as they are purely decorative.

Closes #3424744

added 5 commits

• 54604aaf...f27440c0 - 2 commits from branch project:1.x
• 72f06374 - Add aria-hidden to SVGs for accessibility
• a77f20dd - Use first two letters of menu item as default icon
• e88b52fd - Fix abbreviation layout shift on menu collapse

Compare with previous version

added 8 commits

• e88b52fd...f7224ff8 - 3 commits from branch project:1.x
• 8524152b - Add aria-hidden to SVGs for accessibility
• 0cc1487d - Use first two letters of menu item as default icon
• 94bfb3ae - Fix abbreviation layout shift on menu collapse
• 36efd79b - Revert SVG aria-hidden addition
• a079e1f0 - Revert to CSS icons instead of inline SVGs

Compare with previous version

toolbar button can be without icon

This is the base style needed to get the icons working. Without it, no icons appear. See below.

added 1 commit

• 549dbaf4 - Forgot to commit the compiled CSS

Compare with previous version

then why wildcard was removed? [class*='toolbar-button--icon'] {

probably also can be resolved with just simple attribute https://developer.mozilla.org/en-US/docs/Web/CSS/attr#content_property

closed