eui documentation
  1. Components
  2. EuiIconColorComponent

File

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

Description

Renders multi-colored icons using layered path elements with individual color styling. Supports icons with up to 20 distinct color paths, commonly used for brand logos and complex iconography.

Basic colored icon

Example :
<eui-icon-colored iconClass="icon-brand-logo"></eui-icon-colored>

Accessibility

  • Ensure sufficient color contrast for all icon paths
  • Provide alternative text or labels when icon conveys meaning
  • Consider monochrome fallback for accessibility modes

Notes

  • Icon classes must be defined in your icon font or CSS
  • Each path element receives a .path{n} class for individual styling
  • Best suited for brand logos and multi-color illustrations
  • For simple icons, use eui-icon-svg instead

Metadata

selector eui-icon-colored, span[euiIconColored], [euiIconColored]
template 
<span [class]="iconClass">
    @for (pathNumber of paths; track pathNumber) {
        <span class="path{{ pathNumber }}"></span>
    }
</span>

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

iconClass
Type : any

CSS class name corresponding to the colored icon to display. Must match an icon class from the eUI colored icon set.

HostBindings

class
Type : string

Methods

getCssClasses
getCssClasses()
Returns : string

Properties

Public paths
Type : []
Default value : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""