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 AfterViewInit OnDestroy

Metadata

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

Index

Properties
Methods
Inputs
HostBindings
Accessors

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
getisColorInverted()

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

Returns : boolean

results matching ""

    No results matching ""