# Icon

The Rating component provides icon customization options for both the default and selected state of its items. You can replace the default star icon with different icons for each state, allowing you to match your application's needs.

The Rating provides the following options to customize its icons:

* [SVG icon](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/rating/icon#svg-icon)—To see all available SVG icons, go to the [list of SVG icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/svgicon/svgicon-list).
* [Font icon](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/rating/icon#font-icon)—To see all available font icons, go to the [list of font icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon/icon-list).

## SVG Icon

To customize the displayed icon for the default state of the Rating items, set the [`svgIconOutline`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingcomponent#svgiconoutline) property to the desired [`SVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/svgicon).

On the other hand, if you want to modify the icon that is rendered when the Rating items are selected or hovered, use the [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingcomponent#svgicon) property of the component.

The following example demonstrates how to customize the default Rating icon for each state of the items.

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

## Font Icon

To customize the default Rating icon with a Font icon:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, check out [Icon Settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings).
2. Set the [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/ratingcomponent#icon) property of the component to a font icon in the Kendo UI theme.
   ```html
   <kendo-rating icon="plus"></kendo-rating>
   ```

The following example demonstrates how to use font icons in the Rating component.

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

## Suggested Links

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