What is the proper way to increase the size of the star icon for a Rating control? When inspecting the HTML for the control, I can see that the CSS class k-icon-xl is applied to the star icon, but there doesn't appear to be a way to adjust these classes to larger sizes (e.g. apply k-icon-xxl).
As a workaround, I'm overriding k-icon-xl with the following CSS:
.k-icon-xl.k-svg-i-star-outline.k-svg-icon, .k-icon-xl.k-svg-i-star.k-svg-icon {
width: 48px;
height: 48px;
}
For reference I'm using the latest release of 2023.2.718.
1 Answer, 1 is accepted
Hi David,
Currently, there is no proper way to change the sizes of the star icons in the Rating component, unless you use its CSS classes and change the desired values from there, as shown in the provided workaround. The only other thing that comes to my mind might be to use a custom template, but if the workaround you've found works fine, we can say that is the proper way to go for adjusting star values (this workaround should also work with other icons, just in case you decide to use them, be sure to change the .k-svg-i-star class name to the specific icon's class name).
The following demo represents the implementation and the result of using Templates for the Telerik UI Rating Component:
I hope this information helps.
Kind Regards,
Vasko
Progress Telerik