Gravatar for

Question by nick emmett, Jan 3, 2018 3:17 PM

Changing the default result list icons

Is there a way to change the default icon that is associated to the result types in the result list. I'd like to change at least one of them to something more appropriate. For example, when a Knowledge Article is displayed, it has a spanner icon - which is also fairly small and tricky to tell it's actually a spanner.

2 Replies
Gravatar for

Answer by gminero, Jan 3, 2018 5:37 PM

@nick emmett ->

The component name should be the same if not similar, by hovering over the "icon" or "coveoIcon" component, you should be able to change the icon image. Furthermore, by switching to the HTML view, you can specify the size of the icon. You should see some inline styling next to the component name such as style="width: 100px; heigth: 100px;" from there you can change the size to the one you find more suitable.

If you want to have different Icons per object type, then you will have to create different result templates for your different objects,

Make sure your conditions target the appropriate type, in the above example, the condition applies to the @Objecttype field and applies to knowledgeArticleVersions (Fyi, you can use any available fieldname that is indexed for setting conditions). Afterwards, when you hover over the result template, you can edit them and specify which Icon they should display.

Gravatar for

Comment by nick emmett, Apr 11, 2018 10:41 AM

So I'm just getting around to this - I can see how it looks like I can change the icon, probably for everything here - I get the "Use Smal Icon" checkbox etc and can choose an icon - what I want to do though is change what the default icon is for each of the different sources/types of result. For example - at the minute, our knowledge Articles are displayed with a wrench icon, which we are getting feedback is confusing. How can I dig in and change these icons?

Gravatar for

Answer by Jean-François L'Heureux, Jan 3, 2018 3:35 PM

If you open your result template and look for the `CoveoIcon` component, you can change it to whatever image or markup you like.

Gravatar for

Comment by nick emmett, Jan 3, 2018 3:44 PM

Thanks @Jean-François L'Heureux - apprfeciate the reply. I only see an "Icon" component, not a "CoveIcon" one. In it I only get the option to change the size of the component or the content of the label.

Ask a question