The Zeta icon component has first class integration with the Zeta icon library.
To see the built in icons, please visit Zeta Icons.
These icons can be rendered as rounded or sharp; and the size and color can be customized using CSS variables.
To use this component, you can either use the name prop or place an icon in the slot.
Using the name prop allows for better typescript integration, whereas using the slot allows for more flexibility in terms of custom icons.
<zeta-iconname="home"></zeta-icon>
or
<zeta-icon>home</zeta-icon>
Custom icons can be created by placing an SVG in the slot:
<zeta-icon> <svg> ... </svg> </zeta-icon>
Cssproperty
--icon-size The width/height of the icon
Cssproperty
--icon-color The color of the icon
Slot
Name of icon to be displayed. Full list of icons can be found at Zeta Icons. If this value and the name prop are both populated, the name prop will take precedence.
Name of icon to be displayed. Full list of icons can be found at Zeta Icons.
If this value and the slot are both populated, this will take precedence.
rounded
rounded:boolean
Staticstyles
styles:CSSResultGroup[] = ...
rendering
Protectedrender
render():TemplateResult<1>
Invoked on each update to perform rendering tasks. This method may return
any value renderable by lit-html's ChildPart - typically a
TemplateResult. Setting properties inside this method will not trigger
the element to update.
The Zeta icon component has first class integration with the Zeta icon library. To see the built in icons, please visit Zeta Icons. These icons can be rendered as rounded or sharp; and the size and color can be customized using CSS variables.
To use this component, you can either use the
nameprop or place an icon in the slot. Using the name prop allows for better typescript integration, whereas using the slot allows for more flexibility in terms of custom icons.or
Custom icons can be created by placing an SVG in the slot:
Cssproperty
--icon-size The width/height of the icon
Cssproperty
--icon-color The color of the icon
Slot