Customizing SVG Icons

Coveo JavaScript Search Framework 2.2900.23 (July 2017)

All icons in the Coveo JavaScript Search Framework are SVG (see SVG: Scalable Vector Graphics). You can easily customize or replace these icons using your own CSS rules.

Styling the Default Icons

To achieve a great looking integration with the Coveo JavaScript Search Framework, you may need to modify the default SVG icons.

It is possible to alter any visual aspect of an SVG (color, size, hover effect, etc.) using CSS rules. All Coveo JavaScript Search Framework SVG icons (with the exception of the result file type SVG icons, which are displayed by the ResultList component) are inlined in the HTML. This gives you maximum control over the SVG styling, and allows you to inspect the HTML of your page to see how each SVG is built, and what style is currently being applied to it, so that you can customize it to better suit your needs.

Each SVG and its container has a CSS class that you can use to override the default styling. Some icons, such as the ones that have a hover effect, have extra CSS classes on their inner SVG elements to allow for further customization.

Remember that in order to correctly override the default styles, you need to achieve higher CSS specificity (see Specificity).

Suppose you want to style the default SearchButton icon (the magnifier icon) in your search page to make it red.

If you inspect this icon, you can see that its markup currently looks like this:

<svg class="coveo-search-button-svg" enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <path class="coveo-magnifier-circle-svg" d="m8.368 16.736c-4.614 ..."/>
    <path d="m18.713 20c-.329 0-.659 ..."/>
  </g>
</svg>

Most Coveo JavaScript Search Framework SVG icons have their fill attribute set to the currentColor value to determine their color.  When this is the case, you can change the color of the SVG by setting its color property.

In this case, since the SVG element you want to modify has the coveo-search-button-svg CSS class, you can use use this class to override the default color styling:

.CoveoSearchButton .coveo-search-button-svg {
  color: red;
}

You could also want to modify the hover effect on the SearchButton icon. By default, the circle of the magnifier becomes yellow. Suppose you want it to become black instead.

SVG icons are built using <path> elements. In this case, you can see that the SVG icon you want to modify has a <path> element with the coveo-magnifier-circle-svg CSS class. This element identifies the circle of the magnifier icon.

You can use the coveo-magnifier-circle-svg class selector along with the :hover pseudo-selector to modify the hover effect:

.CoveoSearchButton:hover .coveo-magnifier-circle-svg {
  fill: black;
}

SVG icons with hover effects always have an additional CSS class for the changing SVG element. You can use this class to override the default hover effect.

You should always use your web development tools to inspect the page and verify what the current style of the SVG is. This will help you know which CSS selectors to use and also what you need to override.

Replacing the Default Icons

Each SVG icon has its own container element. If you want to replace an SVG icon, you can use the background of this container to display the graphic of your choice.

Suppose you want to completely replace the default SearchButton SVG icon (the magnifier icon) in your search page.

If you inspect the SearchButton, you can see that its markup currently looks like this:

<a class="CoveoSearchButton" aria-label="Search">
  <span class="coveo-search-button">
    <svg enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="coveo-search-button-svg">
      <g fill="currentColor">
        <path class="coveo-magnifier-circle-svg" d="m8.368 16.736c-4.614 ..."></path>
        <path d="m18.713 20c-.329 ..."></path>
      </g>
    </svg>
  </span>
  <span class="coveo-search-button-loading">
    <svg enable-background="new 0 0 18 18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" class="coveo-search-button-loading-svg">
      <g fill="currentColor">
        <path d="m16.76 8.051c-.448 ..."></path>
        <path d="m9 18c-4.238 ..."></path>
      </g>
    </svg>
  </span>
</a>

The element with the coveo-search-button class is the container for the SVG element with the coveo-search-button-svg class. If you hide the SVG element and display your own icon in the container instead, you can replace the magnifier icon with your own:

.CoveoSearchButton .coveo-search-button-svg {
  width: 0;
  height: 0;
}
 
.coveo-search-button {
  // Your CSS to display your icon.
}

Working with the File Type Icons

The icons that indicate the file type of a result are not inlined in the HTML like the other icons. Instead, the background-image CSS property  is used to display these icons. This allows for icon assignation using CSS classes. Since these icons are not inline in the HTML, it is impossible to modify them using CSS as in the previous examples.

The Icon component is responsible for setting the correct icon in a result template. This component has a value option which lets you set your own icon rather than the auto-selected one. To use this option, you should take a look at the icon list which is available in the Coveo JavaScript Search Framework bundle or here on our CDN. It displays all the icons and their corresponding CSS class (if one is available).