Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
<%@ Page Language="vb" Inherits="Telerik.Web.Examples.Button.EmbeddedIcons.DefaultVB"CodeFile="DefaultVB.aspx.vb" %> <!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 ID="ConfiguratorPanel1" runat="server"> <Views> <qsf:View> <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" 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 ID="ConfiguratorColumn2" 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>