# IconComponent

The `Icon` component can be used to display different icons (i. e. message delivered icon).

## Basic usage

A typical use case for the `Icon` component would be to use in your custom components.

```typescript
@Component({
  selector: "app-custom-message",
  template: `
    <stream-icon icon="delivered-icon"></stream-icon>
    <!-- Other parts of the custom message component -->
  `,
})
export class CustomMessageComponent {
  @Input() message: StreamMessage;
}
```

## Customization

Please refer to the [theming docs](https://getstream.io/chat/docs/sdk/angular/v5/theming/themingv2/#custom-icons)

[//]: # "Start of generated content"

## Inputs and outputs

### icon

**icon**: `undefined` \| `Icon`

The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.

#### Defined in

[projects/stream-chat-angular/src/lib/icon/icon.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L39)

[//]: # "End of generated content"


---

This page was last updated at 2026-08-11T17:19:01.206Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/IconComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/IconComponent/).