Add an Icon Picker component

[afonsodelgado]

Visual

Context

Where and when might this proposed component be used?

During our latest work on allowing users to create Custom Roles, we found the use case where we'd like to add a visual queue to the create role so it can be easily found by admin users when getting a new team member and deciding to assign them a new role. For this, the idea would be to have a IconPicker, where we would render a defined collection of icons and allow users to select different ones for different roles or types of roles. Ideally, it should behave exactly as the existing Popover component.

Since this can also be used in other contexts where users need to customize some sort of new entity, it would be ideally part of the design system.

State

Does this component have state? If so, what are the different states (e.g. accordion with closed/open states)?
The component would ideally be stateless and fully controlled (when it's rendered as Open or Closed).

Progressive enhancement

For smaller screens, we'd need to render it as we do with the Popover component, aka, rendering it as a "bottom sheet". For bigger screens (desktop), we'd also render it the same as the Popover, under its selector.

We'd, of course, be happy to implement the component and contribute it to the design system once we agree if it should be implemented and how.