Icon

<tpg-icon></tpg-icon>

The icon component is a utility component that encapsulates a lot of the iconography conserns of the design system. It can be used standalone, as demonstrated on this page, but is also embedded in many components in the rest of the library. Usually, one should be able to add icons to the correct spots in a design, by passing the relevant constant to another component. You shouldn’t have much need to use this component directly, given that a higher-level component exists for your use-case.

The constant in question is one of a large array exported by the package @tpg/grammar-web-icons, which contains the entire iconography of the design system.

Applications that are bundled will only contain the data for the icons that have been imported and used in this fashion. All other icons contained in @tpg/grammar-web-icons will be stripped out.

NOTE: the name of the attribute for the icon constant is subject to change in the near future.

Examples

Icon constant template

To support tree shaking unused icons in production apps, their SVGs are imported as constants and injected into grammar components as attributes or properties. In Vue or React this is a simple matter syntactically, but in vanilla you will have to query the elements at runtime from JS to do this.

For the icon component, the attribute for this is called icon-template (property: iconTemplate).

Component

Vanilla JS

  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      class="has-placeholder-icon"
  ></tpg-icon>

  <script>
      import {tpgIconPlaceholderCustom} from '@tpg/grammar-web-icons';
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto icons with relevant class applied
          const elements = document.querySelectorAll(
              'tpg-icon.has-placeholder-icon'
          );
          for (const elem of elements)  {
            const icon = elem as Icon;
            icon.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

    import {
      tpgIconPlaceholderCustom,
    } from "@tpg/grammar-web-icons";

    ...

    <tpg-icon
      style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
      iconTemplate={tpgIconPlaceholderCustom}
    ></tpg-icon>

Size

Use the size attribute to set the size of the icon.

Component

Vanilla JS

<div style="display:flex; align-items: center">
  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      size="xsmall"
  ></tpg-icon>
  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      size="small"
  ></tpg-icon>
  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      size="medium"
  ></tpg-icon>
  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      size="large"
  ></tpg-icon>
  <tpg-icon
      style="--iconVectorFill: var(--colorNeutralForegroundDefault)"
      size="xlarge"
  ></tpg-icon>
</div>

<script>
  import {tpgIconPlaceholderCustom} from '@tpg/grammar-web-icons';
  document.addEventListener('DOMContentLoaded', ()=>{
      const elements = document.querySelectorAll("tpg-icon");
      for (const elem of elements)  {
        const icon = elem as Icon;
        icon.iconTemplate = tpgIconPlaceholderCustom;
      }
  });
</script>

React

import {
  tpgIconPlaceholderCustom,
} from "@tpg/grammar-web-icons";

...

<div style={{ display: "flex", alignItems: "center" }}>
  <tpg-icon
    style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
    iconTemplate={tpgIconPlaceholderCustom}
    size="xsmall"
  ></tpg-icon>
  <tpg-icon
    style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
    iconTemplate={tpgIconPlaceholderCustom}
    size="small"
  ></tpg-icon>
  <tpg-icon
    style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
    iconTemplate={tpgIconPlaceholderCustom}
    size="medium"
  ></tpg-icon>
  <tpg-icon
    style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
    iconTemplate={tpgIconPlaceholderCustom}
    size="large"
  ></tpg-icon>
  <tpg-icon
    style={{ "--iconVectorFill": "var(--colorNeutralForegroundDefault)" }}
    iconTemplate={tpgIconPlaceholderCustom}
    size="xlarge"
  ></tpg-icon>
</div>

Nofill

Use the nofill attribute to have the icon use the colors from the svg. This is needed in cases where the SVG itself defines the colors that are to be filled, rather than leaving it to theming. In such cases, omitting this attribute will result in a black icon, which is probably not what you want.

Component

Vanilla JS

  <tpg-icon
      class="has-sensor-ok-icon"
      nofill
  ></tpg-icon>
  <tpg-icon
      class="has-sensor-ok-icon"
  ></tpg-icon>


  <script>
      import {tpgIconSensorOkCustom} from '@tpg/grammar-web-icons';
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto icons with relevant class applied
          const elements = document.querySelectorAll(
              'tpg-icon.has-sensor-ok-icon'
          );
          for (const elem of elements)  {
            const icon = elem as Icon;
            icon.iconTemplate = tpgIconSensorOkCustom;
          }
      });
  </script>

React

import {
  tpgIconPlaceholderCustom,
} from "@tpg/grammar-web-icons";

...

  <tpg-icon
      iconTemplate={tpgIconSensorOkCustom}
      nofill
  ></tpg-icon>
  <tpg-icon
      iconTemplate={tpgIconSensorOkCustom}
  ></tpg-icon>

Tables

Properties

Attribute	Property	Description	Type	Default Value
icon-template	iconTemplate	URI-encoded SVG for the icon to be rendered	IconConstant | ''	''
size	size	Size of the icon	IconSize	'medium'
nofill	nofill	Boolean that specifies if the icon should not be filled, but keep its native colors	boolean	false

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox