Badge - icon/toggle icon support #5957
Description
A badge is sometimes used as a the toggle for a dropdown menu (in breadcrumbs, when multiple breadcrumb items are collapsed to a menu - the badge represents the number of collapsed items), and there is a small toggle/caret icon inside of the badge that is basically unstyled (no support for an icon/toggle icon in the badge). In core, the arrow is too close to the badge text. It looks better in react because the SVG created by react has a little bit of whitespace around it that the core icon does not. The space between the badge text and the toggle icon just comes from a whitespace character in the HTML.
Core:
React:
It seems like if we want to continue to use the menu toggle with this kind of badge inside of it, we should probably add support for either an icon and/or a toggle icon that can hold the icon and add a consistent spacer there between core and react. Either that or add support to the menu toggle that will create a badge and toggle icon, and the toggle icon can come from the menu toggle component. If we needed to do something like control the toggle/caret icon color based on whether the menu toggle is hovered/focused/expanded, we would probably want that toggle icon to come from the menu toggle component instead of the badge.
At any rate, here's what the badge would look like with a specific spacer for that icon:
Core:
xs spacer
sm spacer
React:
xs spacer
sm spacer
