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

Embedded Icons

Icon Class Name RadPushButton
rbAdd
rbRemove
rbOk
rbCancel
rbUpload
rbDownload
rbPrevious
rbNext
rbOpen
rbAttach
rbSave
rbConfig
rbPrint
rbRefresh
rbSearch
rbHelp
rbCart
rbEdit
rbRSS
rbMail
rbFB
rbTwitter

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 CssClass property. All of the predefined classes are shown in the example and can be used for reference.

For example, using CssClass='rbOk' will render the embedded OK icon on the left side of the button.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<!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-narrow">
        <asp:Panel ID="Panel1" runat="server">
            <table class="predIcons">
                <thead>
                    <tr>
                        <th>Icon</th>
                        <th>Class Name</th>
                        <th>RadPushButton</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="rborder">
                            <span class="rbAdd16 rbPredefinedIcons"></span></td><td><span class="text">rbAdd</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton1" runat="server" Text="Add">
                                <Icon CssClass="rbAdd"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbRemove16 rbPredefinedIcons"></span></td><td><span class="text">rbRemove</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton3" runat="server" Text="Remove">
                                <Icon CssClass="rbRemove"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbOk16 rbPredefinedIcons"></span></td><td><span class="text">rbOk</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton5" runat="server" Text="OK">
                                <Icon CssClass="rbOk"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbCancel16 rbPredefinedIcons"></span></td><td><span class="text">rbCancel</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton7" runat="server" Text="Cancel">
                                <Icon CssClass="rbCancel"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbUpload16 rbPredefinedIcons"></span></td><td><span class="text">rbUpload</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton9" runat="server" Text="Upload">
                                <Icon CssClass="rbUpload"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbDownload16 rbPredefinedIcons"></span></td><td><span class="text">rbDownload</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton11" runat="server" Text="Download">
                                <Icon CssClass="rbDownload"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbPrevious16 rbPredefinedIcons"></span></td><td><span class="text">rbPrevious</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton13" runat="server" Text="Previous">
                                <Icon CssClass="rbPrevious"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbNext16 rbPredefinedIcons"></span></td><td><span class="text">rbNext</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton15" runat="server" Text="Next">
                                <Icon CssClass="rbNext"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbOpen16 rbPredefinedIcons"></span></td><td><span class="text">rbOpen</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton17" runat="server" Text="Open">
                                <Icon CssClass="rbOpen"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbAttach16 rbPredefinedIcons"></span></td><td><span class="text">rbAttach</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton19" runat="server" Text="Attach">
                                <Icon CssClass="rbAttach"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbSave16 rbPredefinedIcons"></span></td><td><span class="text">rbSave</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton21" runat="server" Text="Save">
                                <Icon CssClass="rbSave"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbConfig16 rbPredefinedIcons"></span></td><td><span class="text">rbConfig</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton23" runat="server" Text="Config">
                                <Icon CssClass="rbConfig"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbPrint16 rbPredefinedIcons"></span></td><td><span class="text">rbPrint</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton2" runat="server" Text="Print">
                                <Icon CssClass="rbPrint"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbRefresh16 rbPredefinedIcons"></span></td><td><span class="text">rbRefresh</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton27" runat="server" Text="Refresh">
                                <Icon CssClass="rbRefresh"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbSearch16 rbPredefinedIcons"></span></td><td><span class="text">rbSearch</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton29" runat="server" Text="Search">
                                <Icon CssClass="rbSearch"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbHelp16 rbPredefinedIcons"></span></td><td><span class="text">rbHelp</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton31" runat="server" Text="Help">
                                <Icon CssClass="rbHelp"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbCart16 rbPredefinedIcons"></span></td><td><span class="text">rbCart</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton33" runat="server" Text="Shopping Cart">
                                <Icon CssClass="rbCart"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbEdit16 rbPredefinedIcons"></span></td><td><span class="text">rbEdit</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton35" runat="server" Text="Edit">
                                <Icon CssClass="rbEdit"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbRSS16 rbPredefinedIcons"></span></td><td><span class="text">rbRSS</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton37" runat="server" Text="RSS Feed">
                                <Icon CssClass="rbRSS"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbMail16 rbPredefinedIcons"></span></td><td><span class="text">rbMail</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton39" runat="server" Text="Mail">
                                <Icon CssClass="rbMail"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr>
                        <td class="rborder">
                            <span class="rbFB16 rbPredefinedIcons"></span></td><td><span class="text">rbFB</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton41" runat="server" Text="FaceBook">
                                <Icon CssClass="rbFB"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td class="rborder">
                            <span class="rbTwitter16 rbPredefinedIcons"></span></td><td><span class="text">rbTwitter</span>
                        </td>
                        <td>
                            <telerik:RadPushButton ID="RadPushButton43" runat="server" Text="Twitter">
                                <Icon CssClass="rbTwitter"></Icon>
                            </telerik:RadPushButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance