eui documentation
  1. Components
  2. EuiIconSvgComponent

File

packages/components/eui-icon/eui-icon-svg.component.ts

Description

eui-icon-svg component for displaying scalable vector graphics from icon sets. Supports multiple icon libraries, customizable sizing, colors, and transformations. Icons can be loaded from configured asset paths or specified URLs. Provides accessibility features including ARIA labels and role attributes. Commonly used throughout the application for consistent iconography in buttons, menus, and UI elements.

Basic icon

Example :
<eui-icon-svg icon="check" size="m"></eui-icon-svg>

Icon with color

Example :
<eui-icon-svg
  icon="warning"
  fillColor="warning"
  size="l"
  ariaLabel="Warning indicator">
</eui-icon-svg>

Custom icon from URL

Example :
<eui-icon-svg
  [iconUrl]="'/assets/custom-icon.svg'"
  size="xl">
</eui-icon-svg>

Accessibility

  • Set ariaHidden="false" and provide ariaLabel for meaningful icons
  • Decorative icons should keep ariaHidden="true" (default)
  • Use focusable="true" only for interactive icon elements

Notes

  • Icon sets are configured via EUI_CONFIG_TOKEN
  • Use colon notation for specific sets: icon="check:material"
  • Size tokens: 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl
  • Apply transform for rotations (e.g., "rotate-90", "flip-horizontal")

Implements

AfterContentInit OnChanges OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-icon-svg, span[euiIconSvg], i[euiIconSvg]
styleUrls ./styles/_index.scss
templateUrl ./eui-icon-svg.component.html

Index

Properties
Inputs
HostBindings
Accessors

Inputs

ariaHidden
Type : boolean
Default value : true

Hides the icon from assistive technologies when purely decorative. Set to false when icon conveys meaningful information requiring announcement.
ariaLabel
Type : string

Accessible label for screen readers describing the icon's purpose. Provides semantic meaning when icon conveys information beyond decoration.
euiEnd
Type : boolean
Default value : false

Positions the icon at the end (right in LTR, left in RTL) of its container. Commonly used for trailing icons in buttons or list items.
euiStart
Type : boolean
Default value : false

Positions the icon at the start (left in LTR, right in RTL) of its container. Commonly used for leading icons in buttons or list items.
fillColor
Type : string

Fill color for the SVG icon using EUI color token names. Applies CSS custom property in format '--eui-c-{fillColor}'. Affects both fill and color properties for comprehensive icon styling.
focusable
Type : boolean
Default value : false

Makes the icon focusable via keyboard navigation. Enables tab-stop behavior for interactive icon elements.
icon
Type : string

Name of the icon to display, optionally including the icon set using 'iconName:setName' format. When format includes colon separator, automatically splits into icon and set properties. Required for icon display unless iconUrl is provided.
iconUrl
Type : string

Direct URL to an SVG icon file, bypassing the icon set resolution. Useful for loading custom or external icons not in configured icon sets.
isInputIcon
Type : boolean
Default value : false

Applies styling specific to icons used within input fields. Adjusts positioning and spacing for input-embedded icons.
isLoading
Type : boolean
Default value : false

Displays a loading animation or state on the icon. Applies 'eui-icon-svg--loading' class for loading-specific styling.
set
Type : string
Default value : 'eui'

Icon set library to load the icon from. Determines the source directory for icon SVG files.
size
Type : "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | string
Default value : 'm'

Size variant for the icon using predefined scale or custom value. Predefined sizes: '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl'. Custom string values can be provided for non-standard sizing.
style
Type : string
Default value : ''

Custom inline CSS styles applied directly to the icon element. Allows for additional styling beyond component properties.
transform
Type : string
Default value : ''

CSS transform class modifier applied to the icon. Common values include rotation or flip transformations. Applied as 'eui-icon-svg--{transform}' class.

HostBindings

attr.role
Type : string
Default value : 'img'
class
Type : string

Properties

ariaRole
Type : string
Default value : 'img'
Decorators :
@HostBinding('attr.role')
Public assetsBaseUrl
Type : string
Default value : 'assets'
Public iconName
Type : string
Public iconStyle
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""