New to Kendo UI for Angular? Start a free 30-day trial

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—To see all available SVG icons, go to the list of SVG icons.
Font icon—To see all available font icons, go to the list of font icons.

SVG Icon

To customize the displayed icon for the default state of the Rating items, set the svgIconOutline property to the desired 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 property of the component.

html
<kendo-rating
    [svgIcon]="heartIcon"
    [svgIconOutline]="heartOutlineIcon"
>
</kendo-rating>
ts
public heartOutlineIcon: SVGIcon = heartOutlineIcon;
public heartIcon: SVGIcon = heartIcon;

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

Change Theme

Theme

Loading ...

Font Icon

To customize the default Rating icon with a Font icon:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, check out Icon Settings.
Set the 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.