Skip to content 
Icon - Web Component
The Icon component can be used imported from:
Playground
Parameters
INFO
The web component version of the icon doesn't require to import th icons from @zurich/design-tokens.
The Web component uses the <z-icon> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
icon | string | The main parameter has two components following the pattern:
| ||
config | string | The configuration parameter has three components following the pattern:
|
Parameters use
icon
name
The icon parameter is used to define the icon to be displayed. Make sure that you specify, correctly, the nameof the icon you want to use. Check the icon catalog for the available icons.
The icon attribute has one optional modifier that can be applied in order after the name of the icon, using colon (:) as the separator: The pattern would be: <name><?:style>.
style
The style modifier for the icon attribute can receive the value line to render the outlined version of the icon. Check the styling section.
config
The config attribute is an optional parameter that can be used to set the size and color of the icon.
The pattern would be: <?size><?:color>.
size
The first modifier is size and this attribute can receive the values xs, s, m or l. The default size is m. Check the size section. This attribute uses the --z-icon--size CSS custom property to set the size of the icon.
color
The second modifier is color and this attribute can receive the values default, black, white, teal, moss, lilac, peach, candy, mint, lime, lemon, powder-pink.
Browser support
Detected engine:
Chromium
Webkit
Gecko