New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Embedded Icons

This help article shows how to use embedded icons in RadToggleButton, lists the necessary CSS classes and describes the skins specifics.

Figure 1: List of Embedded icons in RadToggleButton.

List of Embedded Icons in RadToggleButton

You can also use custom icons (image or font icons) and fine-tune their position, color and size.


To make the control easier to use, Telerik provides a large set of built-in icons (Figure 1). To use them, set the Icon.CssClass property of each ButtonToggleState (Example 1) to one of the predefined CSS class names, and the respective icon will be shown on the control.

Figure 2: RadToggleButton with an embedded icon (ButtonToggleState.Icon.CssClass="rbOk") from Example 1.

Button with Embedded Icon

Example 1: Declaration of embedded icons in RadToggleButton states.

<telerik:RadToggleButton runat="server" ID="RadToggleButton1" Text="Button with Icon">
        <telerik:ButtonToggleState Selected="true">
            <Icon CssClass="rbOk" />
            <Icon CssClass="rbCancel" />

CssClass List of Embedded Icons

You can find below the full list of CSS classes responsible for the embedded icons in RadToggleButton. The CssClass is composed in the following way: [r]ad[b]utton[IconName]. For example rbAdd.

rbAdd rbPrevious rbPrint rbRSS rbYouTube
rbRemove rbNext rbRefresh rbMail rbVimeo
rbOk rbOpen rbSearch rbFB rbBehance
rbCancel rbAttach rbHelp rbTwitter rbDribble
rbUpload rbSave rbCart rbLinkedIn rbGooglePlus
rbDownload rbConfig rbEdit rbPinterest

Skins Specifics

The color of the predefined icons can be white or black, depending on the chosen Skin. You can see the difference between the Silk and Glow skin in Figure 3.

Figure 3: Embedded icons in RadToggleButton for the Silk and Glow skin have white and black colors.

List of Embedded Icons in RadToggleButton

See Also

In this article