Button - Custom Icons

Primary Icon Secondary Icon

Demo Configurator


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?