We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to place icons in command column buttons instead of text

Platform: ASP.NET MVC |
Control: Grid

In command column buttons by default, the text such as Edit/Delete/Save/Cancel will be displayed. We can also place the icons in those buttons.

Let us see how to place icons in command column buttons.

Grid Initialization







The result will be as follows.

Figure 1: Command column with icon before editing


Figure 2: Command column with icon after editing

Using custom icons

The icons showed in the above examples are available in the Syncfusion`s default theme packages. We can also use our own custom icons in the command buttons.

For example, to use the Font-Awesome icons in the command button, include the reference to the Font-Awesome icons CSS file in your page.


And then specify the corresponding icon class in the prefixIcons property of the buttonOptions.


In such a way, you can assign the CSS class of the corresponding icon in the PrefixIcons property of the ASP.Net MVC Grid and ASP.Net Grid to show the icons in the custom button.

The output result is as follows.

Figure 3: Grid with custom icon in command button before edit

Figure 4: Grid with custom icon in command button after edit


2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile