Built In Buttons

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Internal Icons</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }

    zing-grid {
      --zg-card-columns: 25%;
    }

    zg-card {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    zg-card strong {
      font-weight: 500;
    }

    zg-card zg-icon {
      margin-left: 6px;
    }

    zg-card zg-icon {
      height: 22px;
      width: 22px;
    }

    zg-body[viewport="tablet-portrait"][layout="card"] {
      --zg-card-columns: 33%;
    }

    zing-grid[loading] {
      height: 619px;
    }
  </style>
</head>

<body>

  <zing-grid compact layout="card">
    <zg-data data='[
				{ "type": "cancel" },
        { "type": "cancelrecord" },
        { "type": "checked" },
        { "type": "checkmark" },
        { "type": "close" },
        { "type": "createrecord" },
        { "type": "down" },
        { "type": "edit" },
        { "type": "editrecord" },
        { "type": "error" },
        { "type": "error-tmp" },
        { "type": "firstpage" },
        { "type": "fixedmenu" },
        { "type": "info" },
        { "type": "lastpage" },
        { "type": "layoutcard" },
        { "type": "layoutrow" },
        { "type": "link" },
        { "type": "menu" },
        { "type": "nextpage" },
        { "type": "outsidearrow" },
        { "type": "prevpage" },
        { "type": "reload" },
        { "type": "remove" },
        { "type": "removerecord" },
        { "type": "search" },
        { "type": "submitrecord" },
        { "type": "success" },
        { "type": "unchecked" },
        { "type": "up" },
        { "type": "warning" }
    	]'></zg-data>
    <zg-colgroup>
      <zg-column index="type"></zg-column>
      <zg-column index="type" renderer="iconrender"></zg-column>
    </zg-colgroup>
    <zg-card renderer="iconrender2"></zg-card>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function iconrender(value, $cell, event) {
      return `<zg-icon name="${value}"></zg-icon>`;
    }

    function iconrender2(data, $cell, event) {
      return `<strong>${data.type}</strong> <zg-icon name="${data.type}"></zg-icon>`;
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Internal Icons</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>

  <zing-grid compact layout="card">
    <zg-data data='[
				{ "type": "cancel" },
        { "type": "cancelrecord" },
        { "type": "checked" },
        { "type": "checkmark" },
        { "type": "close" },
        { "type": "createrecord" },
        { "type": "down" },
        { "type": "edit" },
        { "type": "editrecord" },
        { "type": "error" },
        { "type": "error-tmp" },
        { "type": "firstpage" },
        { "type": "fixedmenu" },
        { "type": "info" },
        { "type": "lastpage" },
        { "type": "layoutcard" },
        { "type": "layoutrow" },
        { "type": "link" },
        { "type": "menu" },
        { "type": "nextpage" },
        { "type": "outsidearrow" },
        { "type": "prevpage" },
        { "type": "reload" },
        { "type": "remove" },
        { "type": "removerecord" },
        { "type": "search" },
        { "type": "submitrecord" },
        { "type": "success" },
        { "type": "unchecked" },
        { "type": "up" },
        { "type": "warning" }
    	]'></zg-data>
    <zg-colgroup>
      <zg-column index="type"></zg-column>
      <zg-column index="type" renderer="iconrender"></zg-column>
    </zg-colgroup>
    <zg-card renderer="iconrender2"></zg-card>
  </zing-grid>

</body>

</html>

body {
  background: #e6e6e6;
}

zing-grid {
  --zg-card-columns: 25%;
}

zg-card {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

zg-card strong {
  font-weight: 500;
}

zg-card zg-icon {
  margin-left: 6px;
}

zg-card zg-icon {
  height: 22px;
  width: 22px;
}

zg-body[viewport="tablet-portrait"][layout="card"] {
  --zg-card-columns: 33%;
}

function iconrender(value, $cell, event) {
  return `<zg-icon name="${value}"></zg-icon>`;
}

function iconrender2(data, $cell, event) {
  return `<strong>${data.type}</strong> <zg-icon name="${data.type}"></zg-icon>`;
}