Customize icons

You can customize the icons on a ThoughtSpot page using an icon sprite SVG file and load it from a Web server or CDN.

To override an icon:

Open the ThoughtSpot application page and locate the icon that you want to replace.
1. Right-click on the icon and select Inspect.
2. Inspect the <svg> element.
3. Note the icon ID.
Make sure you have SVG code for the icon that you want to use. For example, if you are using icons from an external site, copy its SVG code.

Create an icon sprite file and add the SVG code and icon ID. The following code snippet shows how to override the chart icon (rd-icon-chart) on the Answers page.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;">
   <defs/>
   <symbol id="rd-icon-chart" viewBox="0 0 18 18">
      <path d="m8.5 4.5c0 1.38071-1.11929 2.5-2.5 2.5s-2.5-1.11929-2.5-2.5 1.11929-2.5 2.5-2.5 2.5 1.11929 2.5 2.5z"/>
      <path d="m15.5 3.375h-2v2.625h-2.5v2h2.5v2.375h2v-2.375h2.5v-2h-2.5z"/>
      <path d="m1 12.875c0-2.7614 2.23858-5 5-5s5 2.2386 5 5v3.125h-10z"/>
   </symbol>
</svg>

To override multiple icons, use the following format:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" symbol id="rd-icon-chart" viewBox="0 0 16 16">
  <path d="M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" symbol id="rd-icon-lightning" viewBox="0 0 16 16">
  <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/>
</svg>

Save the icon sprite file on a Web server.
Add the SVG hosting domain to the CSP connect-src domains allowlist on the Develop > Security Settings page. For more information, see Security Settings.
To override the icons on the ThoughtSpot page, specify the icon sprite URL in the iconSpriteURL property of the customizations object in Visual Embed SDK.

The following code snippet uses the icon-override1.svg file hosted on the Custom CSS demo GitHub Repo to override the chart icon on the Answers page (rd-icon-chart):
```
 customizations: {
    iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
 }
```
Load the application page and check the icon.

The following figures show the icons before and after the override.

Before

After