Standardize sizes of icons in buttons

[roraback]

Expected behavior:

Buttons should never have icons larger than 24x24px to ensure they don't look lopsided/oversized compared to the text they're paired with. See the Figma component in the Application Design System for all of the variants. (Note, however, that we called these Large/Medium/Small/Extra Small because we'd wanted the 'extra small' to be used only in highly compact layouts and preferred to think of it as the exception more so than "extra large" size. Engineering kept the original size names and added Extra Large (our "Large") to the set.)

Icon sizes that I expect (using the size names from the React component) are half of the height of the buttons they sit in:

• Extra Large:
  • Button height: 48px
  • Icon width/heigh: 24px
• Large:
  • Button height: 40px
  • Icon width/height: 20px
• Medium:
  • Button height: 32px
  • Icon width/height: 16px
• Small:
  • The exception
  • Note: the small button has a slightly more crowded appearance than the other sizes because 16px is the minimum size for these icons to be displayed gracefully on standard-definition monitors. Below that, the stroke width is <1px, which will result in poor rendering on some screens.
  • Button height: 24px
  • Icon width/height: 16px

Current behavior:

1. Icons are all too large except in the small button variant. This results in a somewhat lopsided appearance and insufficient padding around icons on certain buttons:
   • Extra large: 32px (should be 24px)
   • Large: 24px (should be 20px)
   • Medium: 20px (should be 16px)
   • Small: 16px (correct)
2. The Extra Large button variant is currently 44px tall, but should be 48px to match designs (and to be double the icon proportions).
3. It also looks like the Large button size might have some wonky horizontal padding around icons—the icon section of the large segmented button is not square. I assume this will be fixed with the icon size change, though, because padding will need to be revisited with a new icon size.

Bug details:

• Teleport version: 17.x
• Recreation steps: Look at the buttons component in storybook and you'll see them laid out in a row as segmented buttons; compare to Figma to see the discrepancies.
• Debug logs: N/A

[bl-nero]

After consulting further with @roraback and @rudream, I'm going to reclassify this one as a feature request, as we currently don't even have a component that would apply standard icon sizes across the board.