Customize icons

Table of Contents

Creating an icon override
- viewBox property
- fill property
Testing an icon override file

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 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

Creating an icon override🔗

The basic structure of an icon override file is shown in the following snippet:

<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-name" viewBox="0 0 18 18">
      <path />
   </symbol>
</svg>

The <path /> portion within the <symbol> tags is the definition of the actual drawing.

You are defining a small icon, so it should fit within a square boundary and have a single solid color.

There are many simple SVG icon examples available online, for example, the SVG viewer site.

You only need to copy the <path> tags from your example SVG within the <symbol> </symbol> tags.

viewBox property🔗

The viewBox property is in the order min-x, min-y, width, and height.

The first two properties should be 0 0 while the second should match any width and height properties from the source of your SVG paths.

The width and height properties may be added directly in the <svg> tag, or as part of viewBox property in that tag, or perhaps in another tag above <path>. Use the values from your source SVG in the viewBox property of the <symbol> element within your override file.

fill property🔗

You can add the fill property to the <symbol> tag to define a different fill color than the default:

<symbol id="rd-icon-spotter" viewBox="0 0 222 225" fill="red">

Testing an icon override file🔗

The Visual Embed SDK Playground allows you to try out the icon customization framework.

To view the code for customization:

Select the Apply custom styles checkbox in the Playground.
The customizations code appears for CSS modifications appears in the code panel.

Replace the customization section with the following code and click Run to view the results:

 customizations: {
    iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
 }

Note	The `cdn.jsdeliver.net` domain is allowed on ThoughtSpot Embedded public playground and trial sites. On your ThoughtSpot application instance, make sure to add the domain that will host the SVG file to the CSP img-src domains allowlist.