[components] Use internal Icon component for ToggleGroupControlOptionIcon

[danieliser]

What?

Trying to use dashicon style string based icon props for the <ToggleGroupControlOptionIcon> component would throw errors expecting a component and getting a string.

This fix corrects that by switching to the more versatile <Icon> from @wordpress/componenets

Why?

<ToggleGroupControlOptionIcon> was using the SVG based <Icon> component from @wordpress/icons which does not support dashicon based strings.

How?

Switched from importing Icon from @wordpress/icons to importing it as internal from within @wordpress/components.

Testing Instructions

1. Try using the new component with a dashicon.

<ToggleGroupControlOptionIcon
	icon="hidden"

3. You can confirm the fix by simply replacing the "string" prop with a JSX Icon

import { Icon } from '@wordpress/components';

<ToggleGroupControlOptionIcon
	icon={ <Icon icon="hidden" /> }

Screenshots or screencast

[mirka]

Makes sense, thank you!

One small thing before we merge, could you add an entry in the components changelog so people can know about this nice enhancement?

[ciampo]

On top of what @mirka said, I also wanted to flag that you won't be able to use Dashicons in Storybook at the moment (see #33984) — furthermore, although Dashicons are not deprecated, their use is currently not encouraged (cc @youknowriad who may be able to give more details on this).

[youknowriad]

Yes, the only reason the Dashicon component is not officially deprecated is because blocks using the "icon" property can't switch to a component easily.

[danieliser]

@youknowriad - So should this even get merged? I assume the long term plan is to move all the dashicons into the icon library at some point?

Happy to add changelog note if still want me to.

[ciampo]

In my opinion, the Icon component from the @wordpress/components package is a more comprehensive component than the one from @wordpress/icons package. It also seems reasonable that ToggleGroupControl uses the Icon component from the same package. Therefore, I think that we should merge the changes from this PR.

The Dashicons "deprecation" process seems complex and should be handled separately from this issue (plus, once we deprecated dashicons, we will have to make changes to the Icon component in @wordpress/components, and therefore it will affect ToggleGroupControl too).

[danieliser]

Changelog note added.

Thanks for the feedback and quick reviews.

[mirka]

Cool, thanks Daniel! 🚀