Change the result icons in a Lightning component

This is for:

Developer System Administrator

When developing a search interface in your Experience Cloud site, you will sometimes want to change the icons of your result templates.

To do so outside of Lightning, you can follow the steps for using custom icons in result templates.

However, when using a Lightning component, you need to follow certain leading practices to ensure that your icons are always displayed correctly.

Step 1: Create and upload your CSS rule to Salesforce

The first step you need to do is to create a CSS rule in a separate file, and upload it to Salesforce. You will also usually want to upload the image of your icon alongside your CSS rule.

  1. Following the Coveo JavaScript Search Framework guidelines, create a CSS rule for your icon.

  2. Ensure that the background-image URL references your image relative to your CSS file.

  3. Save the CSS class as a .css file.

  4. Create a .zip of your files, and upload it to Salesforce (see Defining Static Resources).

Step 2: Reference your class in your component

Now that you have your static resource in Salesforce, you need to add it to your custom Lightning component.

  1. Ensure that you’ve created a custom Lightning component that wraps the Coveo components (see Integrating the Coveo components in a custom Lightning component).

  2. In the Salesforce Developer Console, open your custom Lightning component.

  3. In the .cmp file, add the following line:

     <ltng:require styles="{!$Resource.<MY_CUSTOM_ICON> + '<MY_CSS_RULE_PATH>'}" />

    Where you replace:

    • <MY_CUSTOM_ICON> by the name of the static resource you uploaded.

    • <MY_CSS_RULE_PATH by the path to your CSS rule inside the static resource (for example, /cssClasses/MyCssRule.css).

  4. Save your .cmp file.

Step 3: Modify your result template

Your CSS rule should now be loaded alongside your Lightning component, which means you’re now ready to reference it in your result template to change the icon.

  1. Access the Salesforce Experience Builder.

  2. In the Experience Builder of your community, access the Interface Editor of your search component.

  3. In the Interface Editor, either select an existing result template you want to modify, or create a new one.

  4. In the Layout of your result template (see Organize components within a search result template grid), select the Icon component, and click its Edit icon to edit its options.

  5. Under Value, enter the CSS class name you entered in your .css file.

  6. Save your result template, and then save your search page.

In the Experience Builder, you should now see the new icon for your result templates.

While in the Interface Editor, you will most likely not be able to see your new icon. This is because your static resource isn’t loaded while in the Interface Editor.