Icon | Yext Hitchhikers Platform
Background
The icon component is typically created by other components, but it can also be used as a standalone component.
Basic Configuration
<div class='icon-container'></div>ANSWERS.addComponent('IconComponent', {
container: '.icon-container',
iconName: 'pantheon',
});Built-In Icons
The following is a list of names for the icons that are supported by default. You can reference these names when a component has an attribute to set the icon (this includes the search bar, universal results and no results).
| Name | Icon |
|---|---|
| briefcase | |
| calendar | |
| callout | |
| chevron | |
| close | |
| directions | |
| document | |
| elements | |
| gear | |
| info | |
| kabob | |
| light_bulb | |
| link | |
| magnifying_glass | |
| mic | |
| office | |
| pantheon | |
| person | |
| phone | |
| pin | |
| receipt | |
| star | |
| support | |
| tag | |
| thumb | |
| window |
Icon API
| Property | Type | Default | Description |
|---|---|---|---|
|
iconName
|
string
|
Use one of the predefined icons in the Search UI SDK Library | |
|
iconUrl
|
string
|
Sets the icon to reference an image URL. Overrides icon name. | |
|
classNames
|
string
|
Adds class names to the icon. Multiple classnames should be space-delimited. |
<% elem.innerText %>