ToggleButton Icons
You can put a Font or Svg Icon in the toggle button to illustrate its purpose for your end users.
Parameters
Parameter | Type and Default Value | Description |
---|---|---|
Icon |
object |
Use it to display a Telerik Font and Svg Icons. |
The following example shows how to use the built-in Font and Svg icons.
How to use icons in the Telerik Toggle Button
@* This sample shows how you can use conditional logic to show different icons in the different states.*@
<TelerikToggleButton Icon="@( SvgSelected ? SvgIcon.AlignCenter : SvgIcon.AlignBottom)" @bind-Selected="@SvgSelected">Svg Icon</TelerikToggleButton>
<TelerikToggleButton Icon="@( FontSelected ? FontIcon.VolumeDown : FontIcon.VolumeUp )" @bind-Selected="@FontSelected">Font Icon</TelerikToggleButton>
@code {
private bool SvgSelected { get; set; }
private bool FontSelected { get; set; }
}
You can use relative paths to your images in the
wwwroot
folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
If you don't add text to the button, the button will center the icon on all sides.
Icon Size
Images and 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:
- Define a
Class
for the Toggle Button that setheight
andwidth
styles. The width and height can be set inpx
sufficient to accommodate the icon or toauto
; - Attach an
@onclick
handler to aspan
orimg
element instead of using a button; - Add your own HTML inside the button, something like:
<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>