ButtonGroup Icons
You can add a Telerik Font or SVG icon to the ButtonGroup items to illustrate its purpose by using the Icon
parameter.
How to use icons in the Telerik ButtonGroup Button
@* This sample shows how you can use conditional logic to show different icons in the different states.
It also shows how to use telerik icons, raster icons and sprite images*@
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton Icon="@( FontSelected ? FontIcon.VolumeUp : SvgIcon.VolumeDown )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
</TelerikButtonGroup>
@code{
bool FontSelected { get; set; }
}
If you don't add text to the button, the button will center the icon on all sides.
Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:
- defining a
Class
on the button that providesheight
andwidth
. The width and height can be set inpx
sufficient to accommodate the icon or toauto
,- or attaching an
@onclick
handler to an icon/span
/img
element instead of using a button,- or adding your own HTML inside the button, something like:
<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>