Gutenberg: Components: Missing Core styles in CheckboxControl

[mmtr]

Describe the bug
When rendering the CheckboxControl component from the @wordpress/components package outside of Core, there are some styling issues caused by the lack of the Core styles.

To Reproduce

• Load Gutenberg without Core styles by adding the following snippet into gutenberg.php:

function remove_default_stylesheets() {
  wp_deregister_style('wp-admin');
}
add_action('admin_init', 'remove_default_stylesheets');

• Go to the Gutenberg editor
• Check the Discussion settings on the sidebar

Expected behavior
As @wordpress/components pretends to work standalone, I expect the checkboxes to look like when the Core styles are present (see screenshots below).

Screenshots
With Core styles

Without Core styles

Additional context
Issue found while integrating Gutenberg into Calypso (Automattic/wp-calypso#28101)

[youknowriad]

I think the screenshots are outdated but the checkboxes are still showing in a different style.

[jffng]

I tested out rendering a CheckboxControl component in the Gutenberg playground and applying the missing Core styles directly in the component scss:

However the way that checkbox inputs are styled today requires the Dashicon icon font to display its checked state. I think there are two options to achieve correct styling behavior for this component outside of wp-admin:

1. Build the @wordpress/component styles with the icon font (feels redundant given there's already a Dashicon and Icon component)
2. Alter the CheckboxControl component to accept an Icon or Dashicon component

Are there simpler approaches?

[youknowriad]

@jffng Can we replace it with the SVG instead, since @wordpress/components already contains those?

So probably something more like option 2 but built-in in the component (not a new prop or something).

[jffng]

Attempted a patch (#16551) that places a SVG component inside the label, to maintain expected behavior of the input.