• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Internal Icons</title>
      <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></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: 474px;
        }
      </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>
        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/dev/zinggrid-dev.min.js" defer></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>`;
    }