The icon component allows visualizing collections of pre-registered SVG icons.
Element
igc-icon

Remarks

[object Object]

Example

<!-- Use a built-in icon -->
<igc-icon name="star"></igc-icon>

<!-- Use an icon from a specific collection -->
<igc-icon name="search" collection="material"></igc-icon>

<!-- Mirror the icon for RTL layouts -->
<igc-icon name="arrow-forward" mirrored></igc-icon>

Properties

Section titled "Properties"

collection

Section titled "collection"

The name of the registered collection for look up of icons.

 
collection: string = 'default'

Defined in src/components/icon/icon.ts:110

Remarks

Collections allow organizing icons into logical groups. The "default" collection is used for most icons. Custom collections can be created by registering icons with a specific collection name.

mirrored

Section titled "mirrored"

Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.

 
mirrored: boolean = false

Defined in src/components/icon/icon.ts:124

Remarks

When true, the icon is flipped horizontally using CSS transform. This is particularly useful for directional icons (arrows, chevrons) in right-to-left language contexts.

name

Section titled "name"

The name of the icon glyph to draw.

 
name: string = ''

Defined in src/components/icon/icon.ts:96

Remarks

The icon name can be:

  • A direct reference to a registered icon in the specified collection
  • An alias that resolves to different icons based on the current theme

When the icon name or collection changes, the component automatically fetches and renders the new icon.

styles

Section titled "styles"

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

 
styles: CSSResult[]

Defined in src/components/icon/icon.ts:57

Methods

Section titled "Methods"

connectedCallback

Section titled "connectedCallback" 
connectedCallback(): void

Defined in src/components/icon/icon.ts:127

Returns void

disconnectedCallback

Section titled "disconnectedCallback" 
disconnectedCallback(): void

Defined in src/components/icon/icon.ts:133

Returns void