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