Icon - CSS Component ​

The Icon component can be used imported from:

Attention!

Make sure you import the proper CSS stylesheet. Check CSS components packages here. Icons are excluded of the general import and need to be loaded manually. Check how you can import icons here

Playground ​

Construction ​

The CSS component uses a <i> tag. Using the z-icon HTML custom attribute will render the icon CSS component.

z-icon ​

The z-icon parameter is the main parameter used to render the icon component. Make sure that you specify, correctly, the name of the icon you want to use. Check the icon list here.

The z-icon attribute has two optional modifiers that can be applied in order after the name of the icon, using the colon (:) as a separator. The patter would be <name><?:size><?:style>.

  • 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.
  • The second modifier is style and this attribute can receive the value line to render the outlined version of the icon. Check the styling section

z-color ​

The attribute z-color changes the color of the icon. The possible values are: default, black, white, teal, moss, lilac, peach, candy, mint, lime, lemon, powder-pink.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​