Button Icons
You can add a Telerik Font or SVG icon to the Button to illustrate its purpose by using the Icon
parameter.
The Icon
parameter type is object
and it accepts:
- a member of the
FontIcon
enum - a property of the static
SvgIcon
class - a
string
that is a CSS class for a custom icon
How to use icons in Telerik Button
<TelerikButton Icon="@FontIcon.Filter">Font Icon</TelerikButton>
<TelerikButton Icon="@SvgIcon.Export">SVG Icon</TelerikButton>
<TelerikButton Icon="@( "my-icon" )">Custom Icon</TelerikButton>
<style>
.my-icon {
/* define a background image or a custom font icon here */
background: purple;
}
</style>
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:
- Define a
Class
on the button that providesheight
andwidth
. The width and height can be set inpx
sufficient to accommodate the icon or toauto
,- Attach an
@onclick
handler to an icon/span
/img
element instead of using a button,- Adding your own HTML inside the button, something like:
<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>