eui documentation
  1. Components
  2. EclIconComponent

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 OnDestroy

Metadata

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

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor()

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.
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'.
title
Type : string

Title used for accessibility. Also affects aria-hidden and role.
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.
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'.
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

addExtraClass
addExtraClass(className: string)
Parameters :
Name Type Optional
className string No
Returns : void
removeExtraClass
removeExtraClass(className: string)
Parameters :
Name Type Optional
className string No
Returns : void
setExtraClasses
setExtraClasses(classes: string)
Parameters :
Name Type Optional
classes string No
Returns : void

Properties

baseDirective
Type : unknown
Default value : inject(ECLBaseDirective)
el
Type : unknown
Default value : inject(ElementRef)
Readonly extraClasses
Type : unknown
Default value : signal<string>('')

Extra classes added programmatically by parent components (button, link, etc.)
Readonly hostClasses
Type : unknown
Default value : signal<string>('')

Real classes currently present on . To support [class.foo] / [ngClass].
iconUrl$
Type : Observable<string>
Readonly svgClasses
Type : unknown
Default value : computed<Record<string, boolean>>(() => { return { [this.baseDirective.getCssClasses('ecl-icon')]: true, [`ecl-icon--${this.size()}`]: !!this.size(), [`ecl-icon--${this.transform()}`]: !!this.transform(), [`ecl-icon--${this.color()}`]: !!this.color(), ...this.toClassRecord(this.hostClasses()), ...this.toClassRecord(this.extraClasses()), }; })
svgEl
Type : ElementRef
Decorators :
@ViewChild('svg')

Accessors

isColorInverted
getisColorInverted()

Adds a dark background utility class if the color is set to 'inverted'.

Returns : boolean

results matching ""

    No results matching ""