ToggleButton Icons

Updated on Oct 13, 2026

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.

For SVG icons, use IconVariant to select an available variant. See SVG icon variants.

The following example shows how to use SVG and Font icons. If you don't add text to the button, the button will center the icon on all sides.

Make sure to register font-icons.css if using Telerik font icons.

How to use icons in the Telerik Toggle Button

Example

View Source

Loading ...

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 set height and width styles. The width and height can be set in px sufficient to accommodate the icon or to auto;
• Attach an @onclick handler to a span or img 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>

See Also

• ToggleButton Overview