### 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
ariaRole Public assetsBaseUrl Public iconName Public iconStyle
###### Inputs
ariaHidden ariaLabel euiEnd euiStart fillColor focusable icon iconUrl isInputIcon isLoading set size style transform
###### HostBindings
attr.role class
###### Accessors
cssClasses

### 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
get `cssClasses()`

# results matching ""

# No results matching ""