Docs

<zg-icon>

Interactive Storybook Playground

The <zg-icon> tag is a web component that controls the styling and display of icons in 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.

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

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>

name

String

Description

Sets the icon type of <zg-icon>

Default Value

""

Accepted Values

  • "batchedit"
  • "batcheditcancel"
  • "batcheditsave"
  • "cancel"
  • "cancelrecord"
  • "checked"
  • "checkmark"
  • "close"
  • "createrecord"
  • "down"
  • "duplicaterecord"
  • "edit"
  • "editrecord"
  • "error"
  • "error-tmp"
  • "firstpage"
  • "fixedmenu"
  • "info"
  • "lastpage"
  • "layoutcard"
  • "layoutrow"
  • "link"
  • "menu"
  • "nextpage"
  • "outsidearrow"
  • "prevpage"
  • "reload"
  • "remove"
  • "removerecord"
  • "search"
  • "sort"
  • "submitrecord"
  • "success"
  • "unchecked"
  • "undoremoverecord"
  • "up"
  • "warning"
Demo
Top

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.

ZGIcon CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-icon-color var(--theme-color-primary) Sets the fill color of icon
--zg-icon-height Browser's default value Sets the height of icon. Also set width using --zg-icon-width to scale icon.
--zg-icon-init-fill Browser's default value Sets 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-width Browser's default value Sets the width of icon. Also set height using --zg-icon-height to scale icon.
Top

CSS Selector

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

zg-icon {
  stroke: red;
}
Top

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.

ZGIcon Slots
Name Description Demo
icon Icon content.
Top

[api: <zg-icon>]