Embedded Icons
This help article shows how to use embedded icons in RadToggleButton, lists the necessary CSS classes and describes the skins specifics.
You can also use custom icons (image or font icons) and fine-tune their position, color and size.
Configuration
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.
<telerik:RadToggleButton runat="server" ID="RadToggleButton1" Text="Button with Icon">
<ToggleStates>
<telerik:ButtonToggleState Selected="true">
<Icon CssClass="rbOk" />
</telerik:ButtonToggleState>
<telerik:ButtonToggleState>
<Icon CssClass="rbCancel" />
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>
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.