loading

Icon

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
email
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 Answers Search UI 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.