How to change custom icons for default edit toolbar items?

<style>
        /*Changes the add button icons*/
        .e-grid .e-addnew:before {
            content: "\e609"; /*Change custom icons for the built in icons*/
        }
        /*Changes the edit button icons*/
        .e-grid .e-edit:before {
            content: "\e600";
        }
        /*Changes the delete button icons*/
        .e-grid .e-delete:before {
            content: "\e680" !important;
        }
        /*Changes the save button icons*/
        .e-grid .e-save:before {
            content: "\e646";
        }
        /*Change the cancel icons*/
        .e-grid .e-cancel: before {
            content: "\e60a";
        }
    </style>

 
  <script>
        function create() {
            $("#" + this._id + "_add").append("Add");
            $("#" + this._id + "_edit").append("Edit");
            $("#" + this._id + "_delete").append("Delete");
            $("#" + this._id + "_update").append("Update");
            $("#" + this._id + "_cancel").append("Cancel");
        }
    </script>

<div id="Grid" />
<script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // The datasource "window.gridData" is referred from jsondata.min.js.
                dataSource: window.gridData,
                allowPaging: true,
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                create: "create",
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
                        { field: "EmployeeID", headerText: 'Employee ID', eitType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } },
                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },
                        { field: "ShipName", headerText: 'Ship Name', width: 150 },
                        { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 }
                ]
            });
        })
    </script>

@(Html.EJ().Grid<object>("FlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .AllowPaging()
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Add);
                items.AddTool(ToolBarItems.Edit);
                items.AddTool(ToolBarItems.Delete);
                items.AddTool(ToolBarItems.Update);
                items.AddTool(ToolBarItems.Cancel);
            });
        })
        .AllowPaging()
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).Width(90).Add();          col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(v => v.AddRule("range", "[0,1000]")).Add();
            col.Field("ShipName").HeaderText("ShipName").Width(150).Add();
col.Field("ShipCountry").HeaderText("ShipCountry").Width(90).EditType(EditingType.Dropdown).Add();
        })
   .ClientSideEvents(eve=>eve.Create("create"))
)

<asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
    <div>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
        <ClientSideEvents Create="create" />
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
            <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" />
            <ej:Column Field="ShipName" HeaderText="ShipName" Width="110" />
            <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" />
        </Columns>
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
    </ej:Grid></asp:Content>