Skip to content

Icon

An icon from the root-icons font, rendered as <i is="root-icon">.

Usage

 
<i is="root-icon" icon="check"></i>

Decorative by default. Add a label when the icon stands alone and conveys meaning:

<i is="root-icon" icon="check" label="Verified"></i>

An icon button is simply a button that contains an icon - there is no separate icon-button component: 

<button is="root-button" type="button" aria-label="Copy">
  <i is="root-icon" icon="clipboard"></i>
</button>

Sizes

size takes small, medium and large, off the typography scale rather than a ramp of the component's own - so an icon steps with the text it sits beside. With no size it is 1em: whatever the surrounding font size is, which is what keeps a glyph inside a button the same height as the button's label. 

<i is="root-icon" icon="heart" size="small" label="Small"></i>
<i is="root-icon" icon="heart" size="medium" label="Medium"></i>
<i is="root-icon" icon="heart" size="large" label="Large"></i>

Colour

An icon has no colour of its own and takes no data-color: the glyph is drawn in currentColor, so it is whatever the thing around it is painted in. That is the whole of the API - a coloured icon is an icon inside something coloured, and inside a Button it is the variant and palette that decide. 

<button is="root-button" type="button" data-variant="primary" data-color="default">
  <i is="root-icon" icon="check"></i>Default
</button>
<button is="root-button" type="button" data-variant="primary" data-color="danger">
  <i is="root-icon" icon="trash"></i>Danger
</button>
<button is="root-button" type="button" data-variant="secondary" data-color="default">
  <i is="root-icon" icon="download"></i>Secondary
</button>
<button is="root-button" type="button" data-variant="tertiary" data-color="neutral">
  <i is="root-icon" icon="gear"></i>Tertiary
</button>

The same holds outside a control: set a colour on the element the icon is in, and the glyph follows it.

Passing Flaky Failing
Passing Flaky Failing 
<span is="root-tag" data-color="success"><i is="root-icon" icon="check"></i>Passing</span>
<span is="root-tag" data-color="warning"><i is="root-icon" icon="warning"></i>Flaky</span>
<span is="root-tag" data-color="danger"><i is="root-icon" icon="x"></i>Failing</span>

Attributes
Attribute Type Default Description
icon string - Icon name from the root-icons font
label string - Accessible name; sets role="img" (omit for a decorative icon)
size 'small' | 'medium' | 'large' inherits Glyph size, taken from the typography scale (sm/md/lg)

Extends

HTMLElement - use with <i is="root-icon">. The glyph and font come from the foundation rules, which key on data-icon: the component mirrors icon onto it, so a call site writes the public name and nothing else. A data-icon written by hand is left alone. The component defaults the icon to decorative (aria-hidden="true").