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

Embedded Icons

Button Icon and Class Primary Icon Secondary Icon
rbAdd
rbRemove
rbOk
rbCancel
rbUpload
rbDownload
rbPrevious
rbNext
rbOpen
rbAttach
rbSave
rbConfig
rbPrint
rbRefresh
rbSearch
rbHelp
rbCart
rbEdit
rbRSS
rbMail
rbFB
rbTwitter
  • Demo Configurator
Render mode
Button type

To make the control even easier to work with, we have provided a set of built-in icons that can be displayed on the button. Simply set the predefined CSS class to the PrimaryIconCssClass or/and SecondaryIconCssClass property. All of the predefined classes are shown in the example and can be used for reference.

For example, setting PrimaryIconCssClass='rbOk' will render the embedded OK icon on the left side of the button control.

Tip: You can see how the icons are ordered in the image sprite and get their respective positions here: Image Sprite. The icons background positions are defined in the base stylesheet of Telerik RadButton control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.Web.Examples.Button.EmbeddedIcons.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <asp:Panel ID="Panel1" runat="server">
            <table class="predIcons">
                <thead>
                    <tr>
                        <th>Button Icon and Class</th>
                        <th>Primary Icon</th>
                        <th>Secondary Icon</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="rborder">
                            <span class="rbAdd16 rbPredefinedIcons"></span><span class="text">rbAdd</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Add">
                                <Icon PrimaryIconCssClass="rbAdd"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Text="Add">
                                <Icon SecondaryIconCssClass="rbAdd"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbRemove16 rbPredefinedIcons"></span><span class="text">rbRemove</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" Text="Remove">
                                <Icon PrimaryIconCssClass="rbRemove"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" Text="Remove">
                                <Icon SecondaryIconCssClass="rbRemove"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbOk16 rbPredefinedIcons"></span><span class="text">rbOk</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Text="OK">
                                <Icon PrimaryIconCssClass="rbOk"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" Text="OK">
                                <Icon SecondaryIconCssClass="rbOk"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbCancel16 rbPredefinedIcons"></span><span class="text">rbCancel</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton7" runat="server" Text="Cancel">
                                <Icon PrimaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton8" runat="server" Text="Cancel">
                                <Icon SecondaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbUpload16 rbPredefinedIcons"></span><span class="text">rbUpload</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton9" runat="server" Text="Upload">
                                <Icon PrimaryIconCssClass="rbUpload"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton10" runat="server" Text="Upload">
                                <Icon SecondaryIconCssClass="rbUpload"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbDownload16 rbPredefinedIcons"></span><span class="text">rbDownload</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton11" runat="server" Text="Download">
                                <Icon PrimaryIconCssClass="rbDownload"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton12" runat="server" Text="Download">
                                <Icon SecondaryIconCssClass="rbDownload"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbPrevious16 rbPredefinedIcons"></span><span class="text">rbPrevious</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" Text="Previous">
                                <Icon PrimaryIconCssClass="rbPrevious"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton14" runat="server" Text="Previous">
                                <Icon SecondaryIconCssClass="rbPrevious"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbNext16 rbPredefinedIcons"></span><span class="text">rbNext</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton15" runat="server" Text="Next">
                                <Icon PrimaryIconCssClass="rbNext"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton16" runat="server" Text="Next">
                                <Icon SecondaryIconCssClass="rbNext"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbOpen16 rbPredefinedIcons"></span><span class="text">rbOpen</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton17" runat="server" Text="Open">
                                <Icon PrimaryIconCssClass="rbOpen"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton18" runat="server" Text="Open">
                                <Icon SecondaryIconCssClass="rbOpen"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbAttach16 rbPredefinedIcons"></span><span class="text">rbAttach</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton19" runat="server" Text="Attach">
                                <Icon PrimaryIconCssClass="rbAttach"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton20" runat="server" Text="Attach">
                                <Icon SecondaryIconCssClass="rbAttach"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbSave16 rbPredefinedIcons"></span><span class="text">rbSave</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton21" runat="server" Text="Save">
                                <Icon PrimaryIconCssClass="rbSave"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton22" runat="server" Text="Save">
                                <Icon SecondaryIconCssClass="rbSave"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbConfig16 rbPredefinedIcons"></span><span class="text">rbConfig</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton23" runat="server" Text="Config">
                                <Icon PrimaryIconCssClass="rbConfig"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton24" runat="server" Text="Config">
                                <Icon SecondaryIconCssClass="rbConfig"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbPrint16 rbPredefinedIcons"></span><span class="text">rbPrint</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton25" runat="server" Text="Print">
                                <Icon PrimaryIconCssClass="rbPrint"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton26" runat="server" Text="Print">
                                <Icon SecondaryIconCssClass="rbPrint"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbRefresh16 rbPredefinedIcons"></span><span class="text">rbRefresh</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton27" runat="server" Text="Refresh">
                                <Icon PrimaryIconCssClass="rbRefresh"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton28" runat="server" Text="Refresh">
                                <Icon SecondaryIconCssClass="rbRefresh"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbSearch16 rbPredefinedIcons"></span><span class="text">rbSearch</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton29" runat="server" Text="Search">
                                <Icon PrimaryIconCssClass="rbSearch"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton30" runat="server" Text="Search">
                                <Icon SecondaryIconCssClass="rbSearch"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbHelp16 rbPredefinedIcons"></span><span class="text">rbHelp</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton31" runat="server" Text="Help">
                                <Icon PrimaryIconCssClass="rbHelp"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton32" runat="server" Text="Help">
                                <Icon SecondaryIconCssClass="rbHelp"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbCart16 rbPredefinedIcons"></span><span class="text">rbCart</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton33" runat="server" Text="Shopping Cart">
                                <Icon PrimaryIconCssClass="rbCart"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton34" runat="server" Text="Shopping Cart">
                                <Icon SecondaryIconCssClass="rbCart"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbEdit16 rbPredefinedIcons"></span><span class="text">rbEdit</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton35" runat="server" Text="Edit">
                                <Icon PrimaryIconCssClass="rbEdit"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton36" runat="server" Text="Edit">
                                <Icon SecondaryIconCssClass="rbEdit"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbRSS16 rbPredefinedIcons"></span><span class="text">rbRSS</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton37" runat="server" Text="RSS Feed">
                                <Icon PrimaryIconCssClass="rbRSS"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton38" runat="server" Text="RSS Feed">
                                <Icon SecondaryIconCssClass="rbRSS"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbMail16 rbPredefinedIcons"></span><span class="text">rbMail</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton39" runat="server" Text="Mail">
                                <Icon PrimaryIconCssClass="rbMail"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton40" runat="server" Text="Mail">
                                <Icon SecondaryIconCssClass="rbMail"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbFB16 rbPredefinedIcons"></span><span class="text">rbFB</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton41" runat="server" Text="FaceBook">
                                <Icon PrimaryIconCssClass="rbFB"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton42" runat="server" Text="FaceBook">
                                <Icon SecondaryIconCssClass="rbFB"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbTwitter16 rbPredefinedIcons"></span><span class="text">rbTwitter</span>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton43" runat="server" Text="Twitter">
                                <Icon PrimaryIconCssClass="rbTwitter"></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton44" runat="server" Text="Twitter">
                                <Icon SecondaryIconCssClass="rbTwitter"></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </asp:Panel>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Render mode" Size="Medium">
                    <asp:RadioButtonList ID="RadioButtonListRenderMode" runat="server" AutoPostBack="True"
                        OnSelectedIndexChanged="ChangeRenderMode_SelectedIndexChanged" RepeatDirection="Horizontal">
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>
                        <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Title="Button type" Size="Medium">
                    <asp:RadioButtonList OnSelectedIndexChanged="ChangeButtonType_SelectedIndexChanged"
                        RepeatDirection="Horizontal" ID="RadioButtonListButtonType" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="StandardButton" Selected="True">Standard Button</asp:ListItem>
                        <asp:ListItem Value="LinkButton">Link Button</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>

        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance