Icon button refers to the button which has one or two icons on it. With the icon showing on the button, the function of the button can be understood in an easier and more intuitive way. Actually, the icon can be counted as the extended version of standard button.

This online tutorial is going to guide users to customize the icon settings in asp.net application using C# programming code from following three aspects, which are IconCssClass, Icon Position and Icon Size.

Before offering detailed C# codes, we will offer some important introductions for icon buttons here. 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.

The properties of icon button can be easily configured using the CSS. And to make the control easier to use, we even offer a pre-defined set of built-in PerButton Icons. That is to say, you can easily configure the icon properties by just setting PrimaryIconCssClass or SecondaryIconCssClass property to the predefined CSS class.

PerButton1.Icon.PrimaryIconCssClass = "rbNext";
PerButton1.Icon.SecondaryIconCssClass = "rbPrevious";

You can accurately define the position of icon in the button by setting the distance between icon and four sides of the button respectively.

PerButton1.Icon.PrimaryIconTop = 30;
PerButton1.Icon.SecondaryIconTop = 5;

You can use this property to customize the width & height of icon. Following C# code is offered to help users adjust the size of button, the size of Primary Icon as well as the size of Secondary Icon.

PerButton1.Width = 200;
PerButton1.Height = 50;
PerButton1.Icon.PrimaryIconWidth = 20;
PerButton1.Icon.PrimaryIconHeight = 20;
PerButton1.Icon.SecondaryIconWidth = 20;
PerButton1.Icon.SecondaryIconHeight = 20;