<zg-icon>

The <zg-icon> tag is a web component that controls the styling and display of icons in the grid.

Usage

A <zg-icon> tag can be manually inserted inside the grid as slotted content.

<zing-grid>
	<zg-icon name="checkmark"></zg-icon>
	<zg-icon name="submitrecord"></zg-icon>
</zing-grid>

Attributes

Use the name attribute to determine the icon's type.

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>

CSS Variables

<zg-icon> can be styled with CSS variables, like so:

:root {
  --zg-icon-color: red;
}

Below is a list of all the associated --zg-icon CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

CSS Selector

<zg-icon> can be styled by common CSS selectors, like so:

zg-icon {
  stroke: red;
}

Slots

<zg-icon> contains placeholders to allow adding markup inside the component.

<zg-icon><img slot="icon" src="..."></zg-icon>

Below is a list of all the associated ZGIcon slots. Check out the full list of slots.