Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcIconComponent

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

igc-icon

The icon component renders SVG icons from registered icon collections. Icons can be:

  • Loaded from the internal collection (built-in icons)
  • Registered dynamically using registerIcon or registerIconFromText
  • Referenced by aliases that resolve differently based on the active theme

Icons automatically adapt to the current theme when used within an igc-theme-provider. The component subscribes to the icon registry and updates automatically when icons are registered or references are updated.

<!-- 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>

// Register a custom icon
import { registerIconFromText } from 'igniteui-webcomponents';

const customIconSvg = '<svg viewBox="0 0 24 24">...</svg>';
registerIconFromText('custom-icon', customIconSvg, 'my-collection');

Hierarchy

Hierarchy

  • LitElement
    • IgcIconComponent

Other

styles

Other

collection: string = 'default'

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

collection

"default"

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: boolean = false

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

mirrored

false

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: string = ''

The name of the icon glyph to draw.

name

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

styles: CSSResult[] = ...

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:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>