Skip to content 
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.
icon
name
The icon parameter is used to define the icon to be displayed. Make sure that you specify, correctly, the name of the icon you want to use. Check the icon list here.
style
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>.
The style modifier can receive the value line to render the outlined version of the icon.
z-icon
The z-icon parameter is the main parameter used to render the icon component. It's also used to configure 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 black, white, teal, moss, lilac, peach, candy, mint, lime, lemon, powder-pink.
Browser support
Detected engine:
Chromium
Webkit
Gecko