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 a <z-icon> tag.

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

NameTypeDescription
iconstring

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

  • name: the name of the icon. Check the icon catalog .
  • size: (string) the size of the icon. The default value is m (1.5rem). The possible values are: xs (.75rem), s (1rem), l (3.75rem).
  • style: (optional) defines the style of the icon, being solid the default. The possible value is outline.
z-color
(optional)		string

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

TIP

Check a nice example of the component in vanilla HTML. Open the inspector or visualize the source code to fully understand how to use the component and/or play with it.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/icon.js"></script>
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 components example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
    <script type="module" src="/0.3.7/@zurich/web-components/icon.js"></script>
    <!-- #endregion imports -->


    <link rel="stylesheet" href="/0.3.7/examples/styles.css" />
    <script type="module" src="/0.3.7/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>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>solid</th>
          <td>
            <div>
              <z-icon icon="trash"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="trash" z-color="peach"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="trash" z-color="mint"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="bookmark:s"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="bookmark:xs"></z-icon>
            </div>
          </td>
        </tr>
        <tr>
          <th>outline</th>
          <td>
            <div>
              <z-icon icon="trash:outline"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="trash:outline" z-color="peach"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="trash:outline" z-color="mint"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="bookmark:outline:s"></z-icon>
            </div>
          </td>
          <td>
            <div>
              <z-icon icon="bookmark:outline:xs"></z-icon>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>