Overview

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

Selector

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

Attributes

Attribute	Type	Default Value	Required

Attribute	Type	Default Value	Required
name	IconName		Yes
size	String or number	1em	No

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:

Variable	Default Value

Variable	Default Value
--icon-font-size	`1em`
--icon-color	`currentColor`

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>

Hawksearch Handlebars UI

Icon Component

Analytics