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.

...

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.

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.

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

HTML Examples ​

CodeSandbox example ​