Overview

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

Selector

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

...

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

Icon Names

Anchor
IconName IconName

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'
    | 'star';

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:

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

Default Template

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