Button Icons
You can put an image, sprite or a font icon in the button to illustrate its purpose for your end users. To apply them, use the following properties:
- for a font icon, use the
Icon
attribute to set the font icon class. - for an image, use the
ImageUrl
attribute to provide the URL - for a sprite, set the
SpriteClass
attribute tok-icon MySpriteClass
whereMySpriteClass
defines the CSS rules for the sprite.
You can see how to use the built-in icons in the Font Icons article.
For a custom font icon, define the font and glyph in your Icon
CSS class.
The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
How to use icons in Telerik Button
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
<TelerikButton Icon="filter">Font Icon</TelerikButton>
<TelerikButton ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png">Image URL</TelerikButton>
<style>
/* the sprite for the first button is defined through a CSS rule matchin its Class */
.netherlandsFlag {
background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
background-position: 0 -64px;
}
</style>
The result from the code snippet above
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.
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>