# Items

The ActionSheet items are highly customizable elements that allow you to control their look and feel depending on the use case.

To define the ActionSheet options, provide an `ActionSheetItem` collection to the [`items`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#items) property of the component.

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

## Setting Title and Subtitle

To configure the item text or any additional details, use the [`title`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#title) and [`subtitle`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#subtitle) properties of the `ActionSheetItem` object.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/items/title/source.txt)

## Defining Groups

To indicate a group of items with similar functionality, set the [`group`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#group) property of the `ActionSheetItem` object to `top` or `bottom`. The ActionSheet will visually separate the two groups by rendering a separator line between them.

The following example demonstrates the ActionSheet groups in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/items/group/source.txt)

## Displaying Icons

You can enhance the ActionSheet item content by adding icons. Set the following properties of the `ActionSheetItem` object to take full control over the visibility of the icons:

* [`svgIcon`](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/items#displaying-svg-icons)
* [`icon`](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/items#displaying-font-icons)
* [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/items#displaying-font-icons)
* [`iconSize`](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/items#modifying-icon-size)
* [`iconColor`](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/items#modifying-icon-color)

> 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 ActionSheet, select the desired one from the [list of SVG icons supported by Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list), and set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#svgicon) to the necessary icon name.

```ts
public cartIcon = cartIcon;

public items: ActionSheetItem[] = [
    {
        title: 'Add to Cart',
        svgIcon: this.cartIcon,
    },
];
```

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

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

### Displaying Font Icons

To display an Font icon inside the Breadcrumb:

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/navigation/api/actionsheetitem#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: ActionSheetItem[] = [
         {
             title: 'Add to Cart',
             icon: 'cart',
         },
     ];
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#iconclass) property to a third-party font icon like [FontAwesome](https://fontawesome.com/).
     ```ts
     public items: ActionSheetItem[] = [
         {
             title: 'Add to Cart',
             iconClass: 'fa fa-shopping-cart',
         },
     ];
     ```

The following example demonstrates how to set the `icon` and `iconClass` properties of the ActionSheet.

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

### Modifying Icon Size

To modify the color of an icon inside the ActionSheet, set the [`iconSize`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#iconsize) property to the desired color.

The following example demonstrates how to set the `iconSize` property of the ActionSheet.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/items/iconsize/source.txt)

### Modifying Icon Color

To modify the color of an icon inside the ActionSheet, set the [`iconColor`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#iconcolor) property to the desired color.

The following example demonstrates how to set the `iconColor` property of the ActionSheet.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/items/iconcolor/source.txt)

## Disabling Items

To disable certain items set the [`disabled`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#disabled) property of the `ActionSheetItem` to `true`.

The following example demonstrates the disabled state of the ActionSheet items.

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

## Styling Items

Some scenarios require further customizations of items layout. Use the [`cssClass`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#cssclass) and [`cssStyle`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem#cssstyle) options of the `ActionSheetItem` object to change the layout of the options as necessary.

The following example demonstrates the `cssClass` and `cssStyle` properties in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/items/custom/source.txt)

## Suggested Links

* [API Reference of the ActionSheet](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent)
* [API Reference of the ActionSheetItem](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetitem)