Icon - Web Component ​

Browser support ​

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:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
iconstring

The main parameter has two components following the pattern: <name><?:style>.

  • name: the name of the icon. Check the icon catalog .
  • style: (optional) defines the style of the icon, being solid the default. The possible value is line (outlined).
config
(optional)		string

The configuration parameter has three components following the pattern: <?size><?:color>.

  • size: (optional) the size of the icon. The default value is m (1.5rem). The possible values are: xs (.75rem), s (1rem), l (3.75rem).
  • color: (optional) the color of the icon. Possible values are: default, black, white, teal, moss, lilac, peach, candy, mint, lime, lemon, powder-pink.

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.

You can also use the --z-icon--color CSS custom property to set the color of the icon. And the --z-icon--size CSS custom property to set the size of the icon.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.2/@zurich/web-components/icon.js"></script>
Code
html
<z-icon icon="trash"></z-icon>
<z-icon icon="trash:line"></z-icon>

<z-icon icon="trash" config="peach"></z-icon>
<z-icon icon="trash:line" config="peach"></z-icon>

<z-icon icon="trash" config="mint"></z-icon>
<z-icon icon="trash:line" config="mint"></z-icon>

<z-icon icon="bookmark" config="s"></z-icon>
<z-icon icon="bookmark:line" config="s"></z-icon>

<z-icon icon="bookmark" config="xs"></z-icon>
<z-icon icon="bookmark:line" config="xs"></z-icon>