Product Bundles
DevCraft
All Telerik .NET and Kendo UI JavaScript components and AI Tools in one package.
Kendo UI
Bundle of AI Tools plus four JavaScript UI libraries built natively for jQuery, Angular, React and Vue.
Build JavaScript UI
Javascript
Telerik
Build modern .NET business apps
.Net Web
Cross-Platform
Desktop
Reporting and Documents
AI for Developers & IT
Ensure AI program success
AI Coding
AI Engineering
Additional Tools
Enhance the developer and designer experience
Testing & Mocking
Debugging
UI/UX Tools
CMS
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="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>