Icon - CSS Component โ
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
Browser support โ
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 valuesxs
,s
,m
orl
. The defaultsize
ism
. Check the size section. This attribute uses the--z-icon--size
CSS custom property to set the size of the icon.
- The second modifier is
style
and this attribute can receive the valueline
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
.
You can also use the --z-icon--color
CSS custom property to set the color of the icon.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Icon.css" />
Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Icon style example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Icon.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.3/examples/styles.css" />
<script type="module" src="/0.4.3/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>-</th>
<th>peach</th>
<th>mint</th>
<th>small</th>
<th>xs</th>
<th>lemon:s</th>
</tr>
</thead>
<tbody>
<tr>
<th>solid</th>
<td>
<div>
<i z-icon icon="trash"></i>
</div>
</td>
<td>
<div>
<i z-icon="peach" icon="trash"></i>
</div>
</td>
<td>
<div>
<i z-icon="mint" icon="trash"></i>
</div>
</td>
<td>
<div>
<i z-icon="s" icon="bookmark"></i>
</div>
</td>
<td>
<div>
<i z-icon="xs" icon="bookmark"></i>
</div>
</td>
<td>
<div>
<i z-icon="lemon:s" icon="bookmark"></i>
</div>
</td>
</tr>
<tr>
<th>outline</th>
<td>
<div>
<i z-icon icon="trash:line"></i>
</div>
</td>
<td>
<div>
<i z-icon="peach" icon="trash:line"></i>
</div>
</td>
<td>
<div>
<i z-icon="mint" icon="trash:line"></i>
</div>
</td>
<td>
<div>
<i z-icon="s" icon="bookmark:line"></i>
</div>
</td>
<td>
<div>
<i z-icon="xs" icon="bookmark:line"></i>
</div>
</td>
<td>
<div>
<i z-icon="lemon:s" icon="bookmark:line"></i>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>