ToggleButton Icons
You can put an image, sprite or a font icon in the toggle button to illustrate its purpose for your end users. To apply them, use the following properties:
for a Telerik font icon, use the
Icon
attribute to set the font icon class.for a raster image, use the
ImageUrl
attribute to provide the URL to the icon (relative or absolute).for a custom font icon class, set the
IconClass
parameter of the component to the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.for a sprite, set the
SpriteClass
attribute tok-icon MySpriteClass
whereMySpriteClass
defines the CSS rules for the sprite.
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 the Telerik Toggle 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*@
<TelerikToggleButton SpriteClass="@( FlagSelected ? "flag netherlands" : "flag brazil")" @bind-Selected="@FlagSelected">Sprite</TelerikToggleButton>
<TelerikToggleButton Icon="@( FontSelected ? "volume-off" : "volume-up" )" @bind-Selected="@FontSelected">Font Icon</TelerikToggleButton>
<TelerikToggleButton ImageUrl="@RasterIconUrl" @bind-Selected="@RasterSelected">Image URL</TelerikToggleButton>
<style>
/* the sprite for the first button is defined through a CSS rule matchin its Class */
.flag {
background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
}
.flag.netherlands {
background-position: 0 -64px;
background-color: white;
}
.flag.brazil {
background-position: 0 0;
}
</style>
@code{
bool FlagSelected { get; set; }
bool FontSelected { get; set; }
bool RasterSelected { get; set; }
string RasterIconUrl => RasterSelected ? "https://docs.telerik.com/blazor-ui/images/snowboarding.png" : "https://docs.telerik.com/blazor-ui/images/swimming.png";
}
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>