### File

`packages/ecl/components/ecl-icon/ecl-icon.component.ts`

### Description

ECL icon component – renders SVG icons from various sets depending on current theme. Integrates with ECL theming and supports accessibility options.

### Implements

`OnInit` `OnChanges` `AfterViewInit` `OnDestroy`

### Metadata

HostDirectives | `ECLBaseDirective`
providers | `EclThemeService`
selector | `ecl-icon`
imports | `AsyncPipe` `NgClass`
templateUrl | `./ecl-icon.component.html`

### Index

###### Properties
baseDirective el iconUrl$ svgEl
###### Methods
getClasses
###### Inputs
ariaHidden ariaLabelledby color focusable icon iconSet isFlipHorizontal role size title transform
###### HostBindings
class.ecl-u-bg-dark
###### Accessors
isColorInverted

### Inputs

ariaHidden
Type : `boolean`
Determines whether the icon should be hidden from assistive technologies. Defaults to `true` unless a title is provided.

ariaLabelledby
Type : `string`
ID reference for an external element that labels this icon for screen readers.

color
Type : `"inverted" | "primary" | null`
Default value : `null`
Applies color styling to the icon. Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.

focusable
Type : `boolean`
Default value : `false`
Controls whether the icon is focusable via keyboard. Defaults to `false`.

icon
Type : `string`
Name of the icon to render from the selected set.

iconSet
Type : `"default" | "social" | "social-media" | "flag" | string`
Default value : `'default'`
Defines the icon set to use. Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix. Defaults to `'default'`.

isFlipHorizontal
Type : `boolean`
Default value : `false`
Flips the icon horizontally if set to `true`.

role
Type : `string`
ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.

size
Type : `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "fluid" | string`
Default value : `'xs'`
Size of the icon. Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`. Defaults to `'xs'`.

title
Type : `string`
Title used for accessibility. Also affects `aria-hidden` and `role`.

transform
Type : `string`
Adds a transformation modifier to the icon (e.g., rotation).

### HostBindings

class.ecl-u-bg-dark
Type : `boolean`
Adds a dark background utility class if the color is set to `'inverted'`.

### Methods

getClasses
`getClasses()`
Returns a map of CSS classes applied to the icon. Includes classes for size, color, transform, and base ECL styles. Returns : `literal type`

### Properties

baseDirective
Default value : `inject(ECLBaseDirective)`

el
Default value : `inject(ElementRef)`

iconUrl$
Type : `Observable<string>`

svgEl
Type : `ElementRef`
Decorators : `@ViewChild('svg')`

### Accessors

isColorInverted
get `isColorInverted()`
Adds a dark background utility class if the color is set to `'inverted'`. Returns : `boolean`

# results matching ""

# No results matching ""