### 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

- string

###### Inputs

- icon

###### HostBindings

- class

### 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 ""