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'
    | '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:

{
  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>