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