eui documentation
  1. Components
  2. EuiDashboardCardContentHeaderIconComponent

File

packages/components/eui-dashboard-card/eui-dashboard-card-content-header-icon.ts

Description

Icon component for dashboard card headers, displaying a visual indicator for the card's content type. Automatically sized and styled to fit within the header layout.

Basic Icon

Example :
<eui-dashboard-card-content-header-icon icon="chart-bar:regular"/>

With Different Icons

Example :
<eui-dashboard-card-content-header-icon icon="users:regular"/>
<eui-dashboard-card-content-header-icon icon="shopping-cart:regular"/>
<eui-dashboard-card-content-header-icon icon="eui-calendar"/>

Accessibility

  • Icon is decorative when paired with title text
  • Inherits color from parent card variant
  • Size is fixed at 's' for consistency

Notes

  • Use within eui-dashboard-card-content-header component
  • Supports all EUI icon names and Font Awesome icons
  • Icon color adapts to card variant automatically
  • Fixed size ensures consistent header appearance

Metadata

selector eui-dashboard-card-content-header-icon
imports EUI_ICON
template 
<eui-icon-svg [icon]="icon" size="s"/>
styleUrl ./eui-dashboard-card-content-header-icon.scss

Index

Properties
Inputs
HostBindings

Inputs

icon
Type : string

HostBindings

class
Type : string
Default value : 'eui-dashboard-card-content-header-icon'

CSS class applied to the host element

Properties

string
Type : string
Default value : 'eui-dashboard-card-content-header-icon'
Decorators :
@HostBinding('class')

CSS class applied to the host element

results matching ""

    No results matching ""