# IconComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

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"></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/v8/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

[lib/icon/icon.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L40)

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

---

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