# 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/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:40](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/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/components/IconComponent/](https://getstream.io/chat/docs/sdk/angular/components/IconComponent/).