Provides Moonstone-themed Icon component with interactive toggleable capabilities.

ToggleIcon does not implement a visual change when a user interacts with the control and must be customized by the consumer using css className overrides.

Often, an Icon value is passed as children to represent the selected state but is not required. Omitting children allows the consumer to implement more advanced approaches such as styling the ::before and ::after pseudo-elements to save a DOM node.

The following Moonstone components use ToggleIcon, and make good examples of various usages.

import ToggleIcon from '@enact/moonstone/ToggleIcon';



A customizable Moonstone starting point Icon that responds to the selected prop.

import ToggleIcon from '@enact/moonstone/ToggleIcon';


A component that indicates a boolean state.

import {ToggleIconBase} from '@enact/moonstone/ToggleIcon';

ToggleIconDecoratorHigher-Order Component

Moonstone-specific behaviors to apply to ToggleIconBase.

import {ToggleIconDecorator} from '@enact/moonstone/ToggleIcon';