Custom Grid Command Button

Example

<link href="css/bootstrap4.css" rel="stylesheet" />

<style>

    .e-view:before {
        content: '\e787';
    }

</style>

<GridEvents TValue="Product" OnActionBegin="GridOnActionBegin" CommandClicked="GridOnCommandClicked"></GridEvents>

                    <GridColumn HeaderText="" TextAlign="TextAlign.Center" Width="150">
                        <GridCommandColumns>
                            <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-view", CssClass = "e-flat" })"></GridCommandColumn>
                            <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
                        </GridCommandColumns>
                    </GridColumn>

        public void GridOnCommandClicked(CommandClickEventArgs<Product> args)
        {
            switch (args.CommandColumn.ButtonOption.IconCss)
            {
                case "e-icons e-view":
                    this.OpenProductViewer(args.RowData.ProductId);
                    break;
                default:
                    break;
            }
        }

        public async Task GridOnActionBegin(ActionEventArgs<Product> args)
        {
            switch (args.RequestType)
            {
                case Syncfusion.Blazor.Grids.Action.Cancel:
                    break;
                case Syncfusion.Blazor.Grids.Action.Add:
                    break;
                case Syncfusion.Blazor.Grids.Action.Save:
                    break;
                case Syncfusion.Blazor.Grids.Action.Delete:
                    break;
                default:
                    break;
            }

        }

Icons

https://blazor.syncfusion.com/documentation/appearance/icons/