How to place icons in command column buttons instead of text

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

JS

MVC

ASPX

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