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 provides height and width. The width and height can be set in px sufficient to accommodate the icon or to auto,
• 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>

See Also

• ButtonGroup Overview