Icon

The Icon component is a handy tool for controlling size, and flipping right-to-left for international use. Icons are utilized from Calcite's UI Icon library that contains hundreds of unique concepts.

Overview

Icons can be actionable or illustrative graphical representations of intent. For instance they can be used for wayfinding throughout the interface or represent interactive elements - on their own or in combination with text content. Meaningful and consistent use of icons throughout the interface can help the user easily navigate through workflows.

Use icons sparingly to ensure their meaning is conveyed - overloading the interface with graphical elements can be distracting and reduce the significance of those used.

Usage

  • Use in Buttons, FABs, or Links when accurately supporting the component's action
  • Use in Dropdowns, Comboboxes, Accordions, etc. when it helps with clear decision making
  • Anchor to an edge or corner of a view as a supportive action

Sample

1
<calcite-icon icon="360-view" text-label="360 degree view"></calcite-icon>
v3.0.3

Accessibility

It is recommended to set the textLabel value if your icon is semantic to provide context to more users, in particular users of assistive technologies.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
flipRtlflip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
iconiconDisplays a specific icon.string
preloadpreloadWhen true, it loads preloads the icon data.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
textLabeltext-labelAccessible name for the component. It is recommended to set this value if your icon is semantic.string

Styles

NameDescription
--calcite-ui-icon-color
deprecated Use --calcite-icon-color. Specifies the component's color. Defaults to current color.
--calcite-icon-colorSpecifies the component's color. Defaults to current color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close