In the real life application, to make a control become more intuitive, we may add an icon or two to the button at specified position. And we can call this kind of button as icon button. Actually, icon button can be easily regarded as an enhanced version of the standard button. Thus, icon button contains all the properties that standard button has owned.

In this part, we will offer detailed guidance on how to customize the settings of icon properties. And since we can add one or two icons to the button, the icon can be mainly divided into two categories, which are PrimaryIcon and SecondaryIcon. Users are free to choose to set one or both of these two icons. Note: both PrimaryIcon and SecondaryIcon have their default properties.

1. IconCssClass: users can set icon properties using a pre-defined CSS class.
2. IconPosition: you can accurately define the position of icon in the button by setting the distance between icon and four sides of the button respectively.
3. IconSize: you can use this property to customize the width & height of icon.
4. IconUrl: this property will set an image that is stored in defined path as icon.
5. HoveredIconUrl and PressedIconUrl: these properties are used to help users show different icon when the mouse is hovered over the button or when the button is pressed. Using HoveredIconUrl, the icon will be displayed with the image that is stored in the defined url when the mouse is hovering over the button. Similarly, the PressedIconUrl will make the icon be showed with the image stored in current url when the button is pressed.

In this part, we offer you a detailed coding guidance on how to create an icon button in ASP.NET web application. To achieve AJAX effect, please drag an AjaxPanel component from toolbox to aspx web page and then drag a button control from toolbox to that AjaxPanel. By the way, please make sure that you have installed .NET Framework 3.5 or above versions and that you have installed all the necessary into your ASP.NET web application.

<kettic:PerButton ID="PerButton1" runat="server" Text="Two Icon Button" Height="50" Width="200">
<Icon PrimaryIconCssClass="rbNext" 
SecondaryIconCssClass="rbPrevious" 
PrimaryIconTop="30" SecondaryIconTop="5" 
PrimaryIconHeight="20" PrimaryIconWidth="20" 
SecondaryIconHeight="20" SecondaryIconWidth="20"></Icon>
</kettic:PerButton>

Following picture is a screen shot of the output of above ASP.NET icon button creating application.

Here we recommend a link for those who want to build an icon button in ASP.NET web application using C# code. View more at build icon button using c#.