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

Custom Icons

Primary Icon Secondary Icon
  • Demo Configurator

RadButton provides an easy way to place an Icon on your button by setting the PrimaryIconUrl and/or SecondaryIconUrl properties. A button can have both icons at the same time. Here is a basic example:

<telerik:RadButton ID="RadButton1" runat="server" Text="Shopping Cart">
      <Icon PrimaryIconUrl="~/images/Cart.png" />
 </telerik:RadButton>

To specify custom icons for the button's hover effect, set the PrimaryHoveredIconUrl and/or SecondaryHoveredIconUrl properties.

For precise icon positioning, use the PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom and PrimaryIconLeft properties for the primary icon. For the secondary icon, set the SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom and SecondaryIconLeft properties. For example:

<telerik:RadButton ID="RadButton2" runat="server" Text="Shopping Cart">
      <Icon PrimaryIconUrl="~/images/Cart.png" PrimaryIconTop="4px" PrimaryIconLeft="5px" SecondaryIconUrl="~/images/Add.png" SecondaryIconTop="4px" SecondaryIconRight="5px" />
 </telerik:RadButton>

You can also set these properties through CSS by using the PrimaryIconCssClass and SecondaryIconCssClass properties:

<style type="text/css">
 .classCart
 {
    top: 4px !important;
    left: 5px !important;
 }
 .classAdd
 {
    top: 4px !important;
    right: 5px !important;
 }
 </style>
 
 <telerik:RadButton ID="RadButton3" runat="server" Text="Shopping Cart">
      <Icon PrimaryIconUrl="~/images/Cart.png" PrimaryIconCssClass="classCart"
 SecondaryIconUrl="~/images/Add.png" SecondaryIconCssClass="classAdd" />
 </telerik:RadButton>

Note: it is recommended to use 16x16px icons when working with Standard and Link button types

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 cellpadding="0" cellspacing="0" border="0" class="table">
                <thead>
                    <tr>
                        <th>Primary Icon
                        </th>
                        <th>Secondary Icon
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Find">
                                <Icon PrimaryIconUrl="images/eFind.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Text="Find">
                                <Icon SecondaryIconUrl="images/eFind.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" Text="Close">
                                <Icon PrimaryIconUrl="images/eClose.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" Text="Close">
                                <Icon SecondaryIconUrl="images/eClose.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Text="Flash">
                                <Icon PrimaryIconUrl="images/eFlash.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" Text="Flash">
                                <Icon SecondaryIconUrl="images/eFlash.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton7" runat="server" Text="Html">
                                <Icon PrimaryIconUrl="images/eHtml.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton8" runat="server" Text="Html">
                                <Icon SecondaryIconUrl="images/eHtml.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton9" runat="server" Text="Player">
                                <Icon PrimaryIconUrl="images/ePlayer.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton10" runat="server" Text="Player">
                                <Icon SecondaryIconUrl="images/ePlayer.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton11" runat="server" Text="Rate">
                                <Icon PrimaryIconUrl="images/eRate.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton12" runat="server" Text="Rate">
                                <Icon SecondaryIconUrl="images/eRate.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" Text="SpellCheck">
                                <Icon PrimaryIconUrl="images/eSpellCheck.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton14" runat="server" Text="SpellCheck">
                                <Icon SecondaryIconUrl="images/eSpellCheck.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr class="dark">
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton15" runat="server" Text="Time">
                                <Icon PrimaryIconUrl="images/eTime.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton16" runat="server" Text="Time">
                                <Icon SecondaryIconUrl="images/eTime.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton17" runat="server" Text="Tools">
                                <Icon PrimaryIconUrl="images/eTools.png" PrimaryIconTop="6px" PrimaryIconLeft="8px" PrimaryIconWidth="18px" PrimaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton18" runat="server" Text="Tools">
                                <Icon SecondaryIconUrl="images/eTools.png" SecondaryIconTop="6px" SecondaryIconRight="8px" SecondaryIconWidth="18px" SecondaryIconHeight="18px" ></Icon>
                            </telerik:RadButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </asp:Panel>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList OnSelectedIndexChanged="ChangeButtonType_SelectedIndexChanged"
                    Orientation="Horizontal" ID="rblChangeButtonType" runat="server" AutoPostBack="True">
                    <asp:ListItem Value="StandardButton" Selected="True">Standard Button</asp:ListItem>
                    <asp:ListItem Value="LinkButton">Link Button</asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance