zg-icon

The <zg-icon> tag is a web component that controls the styling and display for the mobile, or card view, of the grid.

Image of the DOM relationship for the zg-icon web component tag

Related Web Components

Usage

A <zg-icon> tag can be manually inserted inside the grid as slotted content or automatically inserted when in mobile view.

<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-icon>
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-icon>
</zing-grid>

You can also use the renderer-template attribute to reference an external template.

<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-icon renderer-template="zingGridCustomCard"></zg-icon>
</zing-grid>

<template id="zingGridCustomCard">
  <h3>[[record.name]]</h3>
  <code>[[record.job]]</code>
</template>

Attributes

There a couple attributes to hook into the <zg-icon> lifecycle. These lifecycle hooks are for rendering and editing.

Example Usage

<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-icon renderer="fncCallAfterTemplateTagInserted">
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-icon>
</zing-grid>

name

String

Description

Sets the icon type of the ZGIcon.

Default Value

""

Accepted Values

  • "cancelrecord"
  • "checked"
  • "checkmark"
  • "close"
  • "down"
  • "edit"
  • "editrecord"
  • "firstpage"
  • "lastpage"
  • "layoutcard"
  • "layoutrow"
  • "link"
  • "menu"
  • "nextpage"
  • "outsidearrow"
  • "prevpage"
  • "reload"
  • "remove"
  • "removerecord"
  • "search"
  • "sort"
  • "submitrecord"
  • "unchecked"
  • "up"
Demo

CSS Variables

All the associated --zg-icon CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-icon-color: red;
}
ZGIcon CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-icon-colorvar(--theme-color-primary)Sets the fill color of icon
--zg-icon-heightBrowser's default valueSets the height of icon. Also set width using --zg-icon-width to scale icon.
--zg-icon-init-fillBrowser's default valueSets fill color of icon when element has [init] attribute. This indicates that column is sortable. The [init] is removed when column is sorted.
--zg-icon-widthBrowser's default valueSets the width of icon. Also set height using --zg-icon-height to scale icon.

CSS Selector

<zg-icon> can be styled by common CSS selectors.

zg-icon {
  stroke: red;
}