Pictogram - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-pictogram> tag:

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

NameTypeDescriptionSlot
pictogramstringThe name of the pictogram to be displayed

pictogram ​

The pictogram parameter is used to define the pictogram to be displayed. Make sure that you specify, correctly, the name of the pictogram you want to use. Check the pictograms catalog

The pictogram parameter has one additional modifier for the dark variant of the pictogram, that can be applied in order after the nameusing colon (:) as the separator: The pattern would be: <name><?:dark>.

You can customize the size of the pictogram using the --z-pictogram--size CSS custom property.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.2/@zurich/web-components/pictogram.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 | Link Web Component example</title>

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

    <link rel="stylesheet" href="/0.5.2/examples/styles.css" />
    <script type="module" src="/0.5.2/examples/params-script.js"></script>
  </head>

  <body>

    <body>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>camping</th>
            <th>earth</th>
            <th>plant</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>-</th>
            <td>
              <div>
                <z-pictogram pictogram="camping"></z-pictogram>
              </div>
            </td>
            <td>
              <div>
                <z-pictogram pictogram="earth"></z-pictogram>
              </div>
            </td>
            <td>
              <div>
                <z-pictogram pictogram="plant"></z-pictogram>
              </div>
            </td>
          </tr>
          <tr>
            <th>dark</th>
            <td>
              <div>
                <z-pictogram pictogram="camping:dark"></z-pictogram>
              </div>
            </td>
            <td>
              <div>
                <z-pictogram pictogram="earth:dark"></z-pictogram>
              </div>
            </td>
            <td>
              <div>
                <z-pictogram pictogram="plant:dark"></z-pictogram>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </body>

</html>