Kendo UI for jQuery - Material Design Icons in Grid Toolbar

by Christian Storb

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
  </head>

  <body>

    <div id="grid"></div>
    <script>
      $(function() {
        // Google material icons
        $('<link>')
          .attr('href', 'https://fonts.googleapis.com/icon?family=Material+Icons')
          .attr('rel', 'stylesheet')
          .appendTo('head');

				var COMMANDBUTTONTMPL = '<a role="button" class="k-button k-button-icontext #=className#" #=attr# href="\\#"><span class="material-icons">#=materialIcon.name#</span>#=text#</a>';

        $("#grid").kendoGrid({
          toolbar: [
						{
              name: "create",
              text: "Add New",
              materialIcon: { name: "done_outline" },
              template: COMMANDBUTTONTMPL
            },
            {
              name: "save"
            },
            {
              name: "cancel"
            }
          ],
          columns: [{
              field: "name"
            },
            {
              field: "age"
            }
          ],
          dataSource: {
            data: [{
                id: 1,
                name: "Jane Doe",
                age: 30
              },
              {
                id: 2,
                name: "John Doe",
                age: 33
              },
            ],
            schema: {
              model: {
                id: "id"
              }
            }
          },
          editable: true
        });
      });

    </script>
  </body>

</html>