# Items Appearance

The Drawer component allows you to modify its textual content and styling according to the specific project requirements.

To configure the Drawer items, use its built-in [`items`](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent#items) property and bind it to an array of [`DrawerItem`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem) elements.

The Drawer provides various configuration options and enables you to do the following:

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#setting-the-item-text">
      <ComponentTitle>Specify the Text</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Set the textual content of Drawer items using the text property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#setting-the-selected-items">
      <ComponentTitle>Set the Selected Items</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Control the selected state of items using the selected property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#disabling-specific-items">
      <ComponentTitle>Disable Specific Items</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Prevent user interaction with specific items by setting the disabled property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#styling-the-items">
      <ComponentTitle>Change the Style of the Items</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Customize item appearance using cssClass or cssStyle properties.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#displaying-icons">
      <ComponentTitle>Display Icons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Add SVG icons or font icons to enhance the visual presentation of Drawer items.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Setting the Item Text

You can set the text of the Drawer's items by utilizing the [`text`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#text) property.

The following example demonstrates how to set the `text` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/text/source.txt)

## Setting the Selected Items

You can modify the selected state of the items in the Drawer by using the [`selected`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#selected) property.

The following example demonstrates how to set the `selected` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/select/source.txt)

## Disabling Specific Items

You can disable Drawer items by setting the [`disabled`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#disabled) property to `true`.

The following example demonstrates how to set the `disabled` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/disabled/source.txt)

## Styling the Items

You can customize the styling of the Drawer's items by using either of the following approaches:

* Setting the [`cssClass`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#cssclass) property.
* Setting the [`cssStyle`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#cssstyle) property.

The following example demonstrates how to set the `cssClass` and `cssStyle` properties of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/styling/source.txt)

## Displaying Icons

Depending on the configuration of the project, you can enhance the content of the Drawer by displaying any of the following icon types:

* [SVG icons](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/items#displaying-svg-icons)
* [Font and third-party icons](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/items#displaying-font-icons)

> As of R2 2023 (`v13.0.0`) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from `font` to `svg`. Set the `svgIcon` property, or [Continue Using Font Icons](https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg#continue-using-font-icons).

### Displaying SVG Icons

To display an SVG icon inside the Drawer set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#svgicon) property of the Drawer to the necessary [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon). For details, go to the [list of SVG icons supported by Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list).

The following example demonstrates how to set the `svgIcon` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/icons/svgicon/source.txt)

### Displaying Font Icons

To display a font icon inside the Drawer:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#icon) property to a font icon in the Kendo UI theme. For details, go to the [list of font icons supported by Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/icon/icon-list).
     ```ts
     public items: Array<DrawerItem> = [{ text: "Inbox", icon: "k-i-inbox" }];
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#iconclass) property to a third-party font icon (like [FontAwesome](https://fontawesome.com/)).
     ```ts
     public items: Array<DrawerItem> = [{ text: "Inbox", iconClass: "fa fa-inbox" }];
     ```

The following example demonstrates how to set the `icon` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/icons/icon/source.txt)

The following example demonstrates how to set the `iconClass` property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/items/icons/iconclass/source.txt)

## Suggested Links

* [Scrolling a Selected Item into View in the Drawer](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/drawer-scroll-selected-item-into-view)
* [API Reference of the Angular DrawerItem](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem)
* [API Reference of the Angular Drawer](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent)