# Templates

By default, each Rating item is rendered with a star icon from [the Kendo Web SVG Icons](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/svg-icons).

To modify the default icon, use the [`ItemTemplate`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/ratingbuilder#itemtemplatesystemstring), [`SelectedTemplate`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/ratingbuilder#selectedtemplatesystemstring), and [`HoveredTemplate`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/ratingbuilder#hoveredtemplatesystemstring) properties.

## Item Template

The item template specifies the template which is used for rendering the items of the Rating. If the `SelectedTemplate` is not specified, the helper will use the default start icon for selected items. Therefore, it is recommended that you specify the `SelectedTemplate` when the `ItemTemplate` option is used.

```Razor HtmlHelper
    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
        .ItemTemplate("<i class='k-icon k-i-heart-outline'></i>")
        .SelectedTemplate("<i class='k-icon k-i-heart'></i>")
    )
```

```Razor TagHelper
    <kendo-rating name="rating"
                  min="1"
                  max="6"
                  value="3"
                  item-template-id="rating-item-template"
                  selected-template-id="rating-selected-template">
    </kendo-rating>

    <script id="rating-item-template" type="text/x-kendo-template">
        <i class='k-icon k-i-heart-outline'></i>
    </script>

    <script id="rating-selected-template" type="text/x-kendo-template">
        <i class='k-icon k-i-heart'></i>
    </script>
```

## Selected Template

The selected template specifies the template for rendering the selected state of the items. If the `ItemTemplate` is not specified, the helper will use the default start icon for displaying the normal state of the items. Therefore, it is recommended that you specify the `ItemTemplate` when the `SelectedTemplate` option is used.

> When the Rating is in half precision mode, use the same template for both the `SelectedTemplate` and `HoveredTemplate` options.

```Razor HtmlHelper
    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
        .ItemTemplate("<i class='k-icon k-i-heart-outline'></i>")
        .SelectedTemplate("<i class='k-icon k-i-heart'></i>")
    )
```

```Razor TagHelper
    <kendo-rating name="rating"
                  min="1"
                  max="6"
                  value="3"
                  item-template-id="rating-item-template"
                  selected-template-id="rating-selected-template">
    </kendo-rating>

    <script id="rating-item-template" type="text/x-kendo-template">
        <i class='k-icon k-i-heart-outline'></i>
    </script>

    <script id="rating-selected-template" type="text/x-kendo-template">
        <i class='k-icon k-i-heart'></i>
    </script>
```

## Hovered Template

The hovered template specifies the template which is used for rendering the hovered state of the items. If the `ItemTemplate` is not specified, the helper will use the default start icon for displaying the normal and selected state of the items.

> When the Rating is in half precision mode, use the same template for both the `SelectedTemplate` and `HoveredTemplate` options.

```Razor HtmlHelper
    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
        .HoveredTemplate("<i class='k-icon k-i-heart'></i>")
    )
```

```Razor TagHelper
    <kendo-rating name="rating"
                  min="1"
                  max="6"
                  value="3"
                  hovered-template-id="rating-selected-template">
    </kendo-rating>

    <script id="rating-hovered-template" type="text/x-kendo-template">
        <i class='k-icon k-i-heart'></i>
    </script>
```

## See Also

* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/rating)