Overview

The Icon component renders an SVG image inline with text content.

Selector

The selector for this component is <hawksearch-icon>.

Attributes

The size attribute determines the height and width of the icon.

Icon Names

The IconType enum lists the icons available to use with this component:

type IconName =
    | 'chevron-back'
    | 'chevron-down'
    | 'chevron-forward'
    | 'chevron-left'
    | 'chevron-right'
    | 'chevron-up'
    | 'cross'
    | 'help'
    | 'minus'
    | 'plus';

CSS Variables

The following CSS classes are available that allow you to bypass the Shadow DOM and customize the appearance of this component without overriding the Handlebars template:

Data Model

The following data model is exposed to the Handlebars template:

{
  url: string,
  height: string,
  width: string
}

Default Template

<svg height='{{height}}' width='{{width}}' focusable='false' aria-hidden='true' class='icon'>
    <use href='{{url}}'></use>
</svg>