New to Kendo UI for jQuery? Download free 30-day trial

Display Material Icons in Grid Command Column


Product Progress® Kendo UI® Grid for jQuery


How can I use Google Materal icons in the edit command buttons of the Grid?


The Material icons require specific HTML to be rendered in the column cell and you cannot display them in a command column. To work around this issue, use a column template and declare the needed HTML.

To simulate the built-in "edit" command button actions (Edit, Update, Cancel), you also need to add custom JavaScript logic that triggers the corresponding actions in the Grid.

The following example demonstrates how to implement the suggested approach.

    <link href=""
          rel="stylesheet" />
    <div id="example">
      <div id="grid"></div>

      $(document).ready(function () {
        var crudServiceBaseUrl = "",
            dataSource = new{
              transport: {
                read:  {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                update: {
                  url: crudServiceBaseUrl + "/Products/Update",
                  dataType: "jsonp"
                destroy: {
                  url: crudServiceBaseUrl + "/Products/Destroy",
                  dataType: "jsonp"
                create: {
                  url: crudServiceBaseUrl + "/Products/Create",
                  dataType: "jsonp"
                parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
              batch: true,
              pageSize: 20,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }

        var grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          pageable: true,
          height: 550,
          toolbar: ["create"],
          columns: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "220px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            // Declare all three buttons in one template and use a custom class to control their visibility.
            { template: "<a href='\\#' class='custom-button edit-button'><i class='material-icons'>create</i></a><a href='\\#' class='custom-button update-button hidden'><i class='material-icons'>done</i></a><a href='\\#' class='custom-button cancel-button hidden'><i class='material-icons'>block</i></a>", width: 80}],
          editable: "inline",
          edit: function(e){
            // Change buttons visibility when the Grid enters edit mode.
            var editRow = e.container;

        $("#grid").on("click", ".custom-button", function(e){
          var btn = $(this);


            var row = btn.closest("tr");
          else if(btn.hasClass("cancel-button")){
          else if(btn.hasClass("update-button")){

      .hidden {
        display: none;
      .custom-button {
        color: black;
In this article