# Templates

The Rating provides various templates that enable you to customize the default icon displayed in its items.

The available template directives that can be used for icon customizations are:

* [`kendoRatingItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingitemtemplatedirective)—Used to render the icon for the default state of the Rating items.
* [`kendoRatingSelectedItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingselecteditemtemplatedirective)—Used to render the icon for the selected state of the Rating items.
* [`kendoRatingHoveredItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratinghovereditemtemplatedirective)—Used to render the icon for the hovered state of the Rating items.

> To customize the default icon of the Rating items, all 3 directives should be provided to the component.

To define the templates, nest an `<ng-template>` tag within the [`<kendo-rating>`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingcomponent) component for each of the directives. The templates also provide access to the index of the current item by using the `let-index="index"` syntax.

The following example demonstrates how to customize the icons of the Rating items using the available templates.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/rating/templates/source.txt)

## Suggested Links

* [API Reference of the Rating](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingcomponent)