The Custom Checkbox component is used to replace the native checkbox button with a custom element (e.g., an icon). A classic example is the "Add to Favorite" button, which often is a heart (or star) icon that can be clicked on to mark an item as favorite.
Assistive technologies will read this component as a standard checkbox button.
Optionally, you can include an inline SVG icon. The color of the icon is automatically updated on click (check the --icon variation).
The component includes some custom properties to simplify the customization process: