SegmentedControl Icons
Each segment in the SegmentedControl can display a text label, an icon, or both. Use the IconField and IconClassField parameters to map model properties that provide icon information for each item.
Icons and Text
Set IconField to the name of the model property that holds the icon identifier. The model property supports the same value types as other Telerik Blazor icon parameters.
The model property can hold:
- A property of the static
SvgIconclass; - A member of the
FontIconenum; - A
stringthat is a CSS class for a custom icon.
Make sure to register
font-icons.cssif using Telerik font icons.
When TextField is also set, each segment renders an icon followed by a text label. When segments have no visible text, use TitleField to provide a tooltip for each item so that icon-only buttons remain identifiable.
SegmentedControl with icon-only and icon-with-text segments
Custom Icon Classes
Use the IconClassField parameter to append an extra CSS class to the icon element. This is useful when you want to apply a modifier class (for example, a color or size variant) on top of a shared base icon class.
SegmentedControl with custom icon classes