Use custom icons in result templates

This is for:

Developer

The JavaScript Search Framework comes with a default set of icons. The prebuilt result templates take advantage of the Icon component to output the corresponding icon for a given file type.

Custom icon example

You can use custom icons instead of the default ones by creating a CSS class for each of your custom icons and referring to this class in the Icon component.

Using custom icons

  1. Add a CSS class for a custom icon in your search page HTML or in a CSS resource.

  2. In the search page HTML, in the result template for which you want to change the icon, locate the element with the CoveoIcon class. Add the data-value="<NAME>" attribute, where you replace <NAME> with the name of your custom icon CSS class.

    You can also use the labelValue option to set a tooltip on the icon by adding the data-label-value="<LABEL>" attribute, where you replace <LABEL> with the desired label.

Some of the prebuilt templates use the small option, which outputs a smaller version of the icon. When adding your own icon, you may want to add the data-small="false" attribute to ensure the option is disabled.

Example use case

You want your Atlassian Jira Software Cloud source results to include the Jira Software icon. You create a CSS class for a background image referring to the www.atlassian.com/software/jira favicon. The default icons are 60px by 60px in size.

.icon-jira {
    display: inline-block;
    background-image: url(<JIRA_FAVICON_CDN_ADDRESS>);
    background-size: 60px;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
}

In the Jira Software Cloud result template, you add the data-value="icon-jira" attribute to the element with the CoveoIcon class.

<span class="CoveoIcon"
      data-value="icon-jira"
      data-label-value="Jira">
</span>