CSS variables and overrides

CSS variables and overrides

ThoughtSpot provides advanced style customization capabilities with the custom CSS framework. The custom CSS feature allows you to override the default styles, color schemes, design elements, and typography of ThoughtSpot elements to match the look and feel of your host application.

Before you begin🔗

  • Identify the UI elements you want to customize.

  • For best results, you can combine the customization settings in the UI and custom CSS. However, note that CSS overrides take precedence over the style customization settings configured in the UI. For more information, see Scope of customization.

  • Try it out in the Visual Embed Playground. The Visual Embed Playground now includes the Apply Styles checkbox, using which you can try out the variables and rules.
    To preview the CSS settings:

    1. Go to Develop > Visual Embed > Playground.

    2. Select the embed element. For example, Full App.

    3. Select Apply custom styles.

      The following code text appears in the init function and is highlighted in the code panel:

      customizations: {
    style: {
      customCSSUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/css-variables.css", // location of your stylesheet
      // To apply overrides for your stylesheet in this init, provide variable values
      customCSS: {
        variables: {
          "--ts-var-button--secondary-background": "#F0EBFF",
          "--ts-var-button--secondary--hover-background": "#E3D9FC",
          "--ts-var-root-background": "#F7F5FF",
        },
      },
    },
  },

    4. Change the style specifications for any variable. For a complete list of variables, see Supported variables.

    5. Click Run.

Try it out

Customize styles🔗

To get started with CSS customization:

  1. Make sure your deployments are upgraded to support Visual Embed SDK version 1.17.0 or later.

  2. To load fonts, images, favicons, and stylesheets from an external source, your instance must allow a CSP override. You must explicitly set the source URLs as trusted domains on the Security Settings page in the Develop tab.

  3. In the init call, add the location of the stylesheet in the customCssUrl attribute.

    The following example sets an external stylesheet hosted on GitHub and uses jsDelivr to provide the CSS overrides to ThoughtSpot:

    init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        style: {
            customCSSUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/css-variables.css"
        }
    }
});
    customCssUrl

    String. CSS file path. You can copy the default CSS file provided by ThoughtSpot to create your own. This file includes the most common variables and rules that ThoughtSpot supports. You can apply the overrides within the given file and load it, or add style specifications directly in the code.

    customCSS

    The custom CSS object that defines variables and rules to override style specifications in the code.

    The following example shows how to override the style specifications for secondary buttons using customCSS variables directly in the init code:

    init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        style: {
            customCSS: {
                variables: {
                    "--ts-var-button--secondary-background": "#F0EBFF",
                    "--ts-var-button--secondary--hover-background": "#E3D9FC",
                    "--ts-var-root-background": "#F7F5FF",
                },
            }
        }
    }
});

  4. If custom fonts are required, import fonts.

    The following example shows how to add a custom font in the CSS file:

    @font-face {
        font-family: 'YourFontName'; /Name of the font/
        src: url('http://domain.example/fonts/font.ttf'); /source URL of the font/
    }
    :root {
        --ts-var-root-font-family: 'YourFontName';
    }

    The following example shows how to add a custom font and apply it to CSS variables in the customCSS object:

    init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        style: {
            customCSS: {
                variables: {
                    "--ts-var-root-font-family": 'YourFontName',
                },
                rules_UNSTABLE: {
                    '@font-face': {
                        'font-family': 'YourFontName',
                        'src': "url('http://domain.example/fonts/font.ttf')"
                    }
                }
            }
        }
    }
});

  5. After you modify the styles, reload your application and verify the changes.

Supported variables🔗

ThoughtSpot provides a default CSS file containing the most common variables and rules supported in a given release version. You can apply the overrides within the given file or add variable definitions directly in the code.

Application-wide settings🔗

The following example shows the supported variables:

VariableDescription

--ts-var-root-background

Background color of the Liveboard, visualization, Search, and Answer pages.

--ts-var-root-color

Color of the text on application pages.

--ts-var-root-font-family

Font type for the text on application pages.

--ts-var-root-text-transform

Text transformation specification for UI elements in the app.

Navigation panel🔗

The navigation panel appears at the top of the application page.

VariableDescription

--ts-var-nav-background

Background color of the top navigation panel.

--ts-var-nav-color

Font color of the top navigation panel.

--ts-var-search-data-button-background

Background color of the Search data button.

--ts-var-search-data-button-font-color

Color of the text on the Search data button.

--ts-var-search-data-button-font-family

Font of the text on the Search data button.

Search bar and Data panel🔗

The search bar element that allows passing search tokens.

VariableDescription

--ts-var-search-bar-text-font-color

Font color of the text in the Search bar.

--ts-var-search-bar-text-font-family

Font of the text in the Search bar.

--ts-var-search-bar-text-font-style

Font style of the text in the Search bar.

--ts-var-search-bar-background

Background color of the search bar.

--ts-var-search-auto-complete-background

Background color of the search suggestions panel.

--ts-var-search-navigation-button-background

Background color of the navigation panel that allows you to undo, redo, and reset search operations.

--ts-var-search-bar-navigation-help-text-background

Background color of the navigation help text that appears at the bottom of the search suggestions panel.

--ts-var-search-bar-auto-complete-hover-background

Background color of the search suggestion block on hover.

--ts-var-search-auto-complete-font-color

Font color of the text in the search suggestion panel.

--ts-var-search-auto-complete-subtext-font-color

Font color of the sub-text that appears below the keyword in the search suggestion panel.

--ts-var-answer-data-panel-background-color

Background color of the data panel.

--ts-var-answer-edit-panel-background-color

Background color of the vertical panel on the right side of the Answer page, which includes the options to edit charts and tables.

The following figure shows customizable search page components:

Search components

Chart switcher🔗

The chart switcher icon chart switcher appears on search results and Answer pages:

VariableDescription

--ts-var-answer-view-table-chart-switcher-background

Background color of the chart switcher on search results and Answer pages.

--ts-var-answer-view-table-chart-switcher-active-background

Background color of the currently selected chart type in the chart switcher.

Button elements🔗

ThoughtSpot application contains the following types of button elements:

  • Primary
    Buttons that trigger an action for an entire page or a container. For example, the Go button on the search bar.

    Note

    The Go button appears as a primary button when the search bar is in the focused state. If you click outside the search bar or execute the search query to load search results, the Go button changes to a secondary button.

    Primary buttons may contain text, text with an icon, or just an icon.

  • Secondary
    Buttons that trigger additional actions. For example, More menu the more options menu and Edit buttons on a Liveboard.

  • Tertiary
    Buttons that are less prominent and trigger independent actions for sub-tasks on a page. For example,the Undo, Redo, Reset buttons on the Search page.

Use the following variables to customize buttons.

VariableElement typeDescription

--ts-var-button-border-radius

Main button

Border-radius of main buttons.
For example, the Search data button in the top navigation panel.

--ts-var-button--icon-border-radius

Small buttons

Border-radius of small buttons such as secondary buttons.
For example, share and favorite buttons.

--ts-var-button--primary-color

Primary button

Font color of the text on primary buttons. For example, the primary buttons on Liveboard, Answer, Data workspace, SpotIQ, or Home page.

--ts-var-button--primary—​font-family

Primary button

Font family specification for the text on primary buttons.

--ts-var-button--primary-background

Primary button

Background color of the primary buttons. For example, the primary buttons such as Pin and Save.

--ts-var-button--primary—​hover-background

Primary button

Background color of the primary buttons on hover.

--ts-var-button--secondary-color

Secondary button

Font color of the text on the secondary buttons.

--ts-var-button--secondary—​font-family

Secondary button

Font family specification for the text on the secondary buttons.

--ts-var-button--secondary-background

Secondary button

Background color of the secondary buttons.

--ts-var-button--secondary--hover-background

Secondary button

Background color of the secondary button on hover.

--ts-var-button--tertiary-color

Tertiary button

Font color of the tertiary button. For example, the Undo, Redo, and Reset buttons on the Search page.

--ts-var-button--tertiary-background

Tertiary button

Background color of the tertiary button.

--ts-var-button--tertiary--hover-background

Tertiary button

Background color of the tertiary button when a user hovers over these buttons.

Visualization and Answer charts🔗

Use the following variables to customize UI elements on Liveboard, visualization and Answer pages.

Tiles on Liveboard, title and description of charts and tables

You can customize the look and feel of the visualization tiles on a Liveboard, styles for title and description text of charts and tables.

VariableDescription

--ts-var-viz-title-color

Font color of the title text of a visualization or Answer.

--ts-var-viz-title-font-family

Font family specification for the title text of a visualization/Answer.

--ts-var-viz-title-text-transform

Text transformation specification for visualization and Answer titles.

--ts-var-viz-description-color

Font color of the description text and subtitle of a visualization or Answer.

--ts-var-viz-description-font-family

Font family specification of description text and subtitle of a visualization or Answer.

--ts-var-viz-description-text-transform

Text transformation specification for description text and subtitle of a visualization or Answer.

--ts-var-viz-border-radius

Border-radius for the visualization tiles and header panel on a Liveboard.

--ts-var-viz-box-shadow

Box shadow property for the visualization tiles and header panel on a Liveboard.

--ts-var-viz-background

Background color of the visualization tiles and header panel on a Liveboard.

--ts-var-viz-legend-hover-background

Background color of the legend on a visualization or Answer.

Chart selection widget

The chart selection widget appears on clicking the Change visualization icon the Change visualization icon on the Answer page or when you open a visualization in the Edit mode.

Chart selection widget

Use the following variables to customize the background color of the chart type icons:

VariableDescription

--ts-var-answer-chart-select-background

Background color of the selected chart type on the chart selection widget.

--ts-var-answer-chart-hover-background

Background color of the chart type element when a user hovers over a chart type on the chart selection widget.

Filter chips on visualization and Answer pages

Filter chips appear on the Liveboard, Answer, and visualization pages if filters are applied on charts and tables. You can use the following variables to customize the look and feel of filter chips.

VariableDescription

--ts-var-chip-border-radius

Border-radius of filter chips.

--ts-var-chip-box-shadow

Shadow effect for filter chips.

--ts-var-chip-background

Background color of filter chips.

--ts-var-chip--active-color

Font color of the filter label when a filter chip is selected

--ts-var-chip--active-background

Background color of the filter chips when selected.

--ts-var-chip--hover-color

Font color of the text on filter chips when hovered over.

--ts-var-chip--hover-background

Background color of filter chips on hover.

--ts-var-chip-color

Font color of the text on filter chips.

--ts-var-chip-title-font-family

Font family specification for the text on filter chips.

Axis title and labels on charts

Use the following variables to customize X-axis and Y-axis titles and labels on charts.

VariableDescription

--ts-var-axis-title-color

Font color of axis title on charts.

--ts-var-axis-title-font-family

Font family specification for the X and Y axis title text.

--ts-var-axis-data-label-color

Font color of the X and Y axis labels.

--ts-var-axis-data-label-font-family

Font family specification for X and Y axis labels .

Menu elements🔗

CSS Variables for More menu the more options menu, contextual menu, and dropdown selection panels. The More menu appears on Liveboard, visualization, answers, SpotIQ, and several other application pages. Contextual menu appears when you right-click on a data point on a chart or table.

VariableDescription

--ts-var-menu-color

Font color of the menu items.

--ts-var-menu-background

Background color of menu panels.

--ts-var-menu-font-family

Font family specification for the menu items.

--ts-var-menu-text-transform

Text capitalization specification for the menu items.

--ts-var-menu--hover-background

Background color for menu items on hover.

Dialogs🔗

CSS variables for dialogs that prompt the user to select an option or enter information. For example, the Liveboard pin dialog that appears on clicking Pin on the Search results or Answer page, the Show underlying data dialog that appears on clicking Show underlying data on a Liveboard visualization or Answer.

VariableDescription

--ts-var-dialog-body-background

Background color of the dialogs.

--ts-var-dialog-body-color

Font color of the body text displayed on dialogs.

--ts-var-dialog-header-background

Background color of the header text on dialogs.

--ts-var-dialog-header-color

Font color of the header text on dialogs.

--ts-var-dialog-footer-background

Background color of the footer area on dialogs.

Natural Language Search interface🔗

The Natural Language Search interface is also referred to as Sage Search. The Sage Search interface includes several elements such as the header, search bar, suggested queries, and sample questions panel.

--ts-var-sage-bar-header-background-colorBackground color of the header bar on the Sage Search page.

--ts-var-source-selector-background-color

Background color of the data source selector.

--ts-var-sage-search-box-font-color

Font color of the search text.

--ts-var-sage-search-box-background-color

Background color of the Sage search box.

--ts-var-sage-embed-background-color

Background color of the Answer page generated from a Sage Search query.

--ts-var-sage-seed-questions-background

Background color of the sample questions panel.

--ts-var-sage-seed-questions-font-color

Font color of the search query text in the sample questions panel.

--ts-var-sage-seed-questions-hover-background

Background color of the sample question panel on hover

--ts-var-sage-bar-img-url
Not supported in 9.10.0.cl and later versions

URL path of the search icon on the header bar.

--ts-var-sage-bar-img-color
Not supported in 9.10.0.cl and later versions

Color of the search icon on the header bar.

--ts-var-sage-bar-img-visibility
Not supported in 9.10.0.cl and later versions

Visibility of the search icon on the header bar.

UI element reference🔗

The following figures show the customizable elements and example definitions for CSS variables.

Search page🔗

CSS customization Search page

Liveboard page🔗

CSS customization Liveboard page

Sample CSS file with variable definitions🔗

:root {
/******** App ********/

  /* Application-wide background, app-wide text color, app-wide font, app-wide text transform */
  --ts-var-root-background: #FFFFFF;
  --ts-var-root-color: #1D232F;
  --ts-var-root-font-family: Roboto,Helvetica,Arial,sans-serif;
  --ts-var-root-text-transform: initial;

  /******** Top navigation panel ********/
  --ts-var-nav-color: #F7F5FF;
  --ts-var-nav-background: #163772;
  --ts-var-search-data-button-background": #EAEDF2;
  --ts-var-search-data-button-font-color: var(--ts-var-root-color);
  --ts-var-search-data-button-font-family: var(--ts-var-root-font-family);

  /******** Search bar, search navigation and auto-suggestion panels ********/
  --ts-var-search-bar-text-font-color: #1D232F;
  --ts-var-search-bar-text-font-family: var(--ts-var-root-font-family);
  --ts-var-search-bar-text-font-style: normal;
  --ts-var-search-bar-background: #000000;
  --ts-var-search-auto-complete-background: #EAEDF2;
  --ts-var-search-navigation-button-background: #EAEDF2;
  --ts-var-search-bar-navigation-help-text-background: #EAEDF2;
  --ts-var-search-bar-auto-complete-hover-background: #C0C6CF;
  --ts-var-search-auto-complete-font-color: #000000;
  --ts-var-search-auto-complete-subtext-font-color: #1D232F;

 /******** Data and edit panels on Answer page ********/
  --ts-var-answer-data-panel-background-color: initial;
  --ts-var-answer-edit-panel-background-color: #1D232F;

  /******** Buttons ********/
  /* Application-wide button design for main buttons. For example, Search data*/
  --ts-var-button-border-radius: 5px;

  /* Application-wide button design for smaller buttons. For example, buttons with share and favorite icons*/
  --ts-var-button--icon-border-radius: 5px;

  /* Primary buttons: For example, the Go button in the search bar, the Pin and Save buttons on the Search page */
  --ts-var-button--primary-color: #ffffff;
  --ts-var-button--primary-background: #2770EF;
  --ts-var-button--primary--hover-background: #1D232F;
  --ts-var-button--primary--font-family: var(--ts-var-root-font-family);

  /* Secondary buttons. For example, the Edit and Explore buttons on the Liveboard page*/
  --ts-var-button--secondary-color: #1D232F;
  --ts-var-button--secondary-background: #EAEDF2;
  --ts-var-button--secondary--hover-background: #2359B6;
  --ts-var-button--secondary--font-family: var(--ts-var-root-font-family);

  /* Tertiary buttons. For example, the Undo, Redo buttons on the Search page*/
  --ts-var-button--tertiary-color: #1D232F;
  --ts-var-button--tertiary-background: #FFFFFF;
  --ts-var-button--tertiary--hover-background: #EAEDF2;

  /******** Visualizations and answers ********/
  /* Title text */
  --ts-var-viz-title-color: #2359B6;
  --ts-var-viz-title-font-family: Roboto,Helvetica,Arial,sans-serif;
  --ts-var-viz-title-text-transform: Capitalize;

  /* Subtitle and description text */
  --ts-var-viz-description-color: #C26232;
  --ts-var-viz-description-font-family: var(--ts-var-root-font-family);
  --ts-var-viz-description-text-transform: Capitalize;

  /* Visualization tile customization on the Liveboard page*/
  --ts-var-viz-border-radius: 15px;
  --ts-var-viz-box-shadow: 1px 2px 5px #888888;
  --ts-var-viz-background: #F2F7FF;
  --ts-var-viz-legend-hover-background: #ABC7F9;

  /* Chart selection widget on answers and visualization pages*/
  --ts-var-answer-chart-select-background: #ABC7F9;
  --ts-var-answer-chart-hover-background: #CEDCF5;

  /* Filter chips on answers and visualization pages */
  --ts-var-chip-border-radius: 25pt;
  --ts-var-chip-title-font-family: var(--ts-var-root-font-family);
  --ts-var-chip-box-shadow: initial;
  --ts-var-chip-background: #B5ECF2;
  --ts-var-chip-color: var(--ts-var-root-color);
  --ts-var-chip--hover-background: #48D1E0;
  --ts-var-chip--hover-color: var(--ts-var-root-color);
  --ts-var-chip--active-background: #369FAA;
  --ts-var-chip--active-color: #ffffff;

  /* Axis titles and labels*/
  --ts-var-axis-title-color: var(--ts-var-root-color);
  --ts-var-axis-title-font-family: var(--ts-var-root-font-family);
  --ts-var-axis-data-label-color: #163772;
  --ts-var-axis-data-label-font-family: var(--ts-var-root-font-family);

  /******** Menu components ********/
  --ts-var-menu-color: var(--ts-var-root-color);
  --ts-var-menu-background: #DEE8FA;
  --ts-var-menu-font-family: var(--ts-var-root-font-family);
  --ts-var-menu-text-transform: capitalize;
  --ts-var-menu--hover-background: #ABC7F9;

  /**** Dialogs and modals that prompt users to perform an action or enter information *******/
  --ts-var-dialog-body-background: var(--ts-var-root-background);
  --ts-var-dialog-body-color: var(--ts-var-root-color);
  --ts-var-dialog-header-background: #CEDCF5;
  --ts-var-dialog-header-color: var(--ts-var-root-color);
  --ts-var-dialog-footer-background: var(--ts-var-root-background);

}

Customize elements using rules🔗

The rules option in the customCSS object allows you to apply style overrides to UI components and elements that cannot be customized using the variables provided by ThoughtSpot, inline in your code without having to include a separate stylesheet file.

Warning

While the rules option allows granular customization of individual elements, note that the rule-based style overrides can break when your ThoughtSpot instance is upgraded to a new release version.

When defining rules for style overrides:

  • Use the correct style class and values in your rule statements.
    To find the class name of an element:

    1. Right-click on the element and select Inspect.

    2. Note the style class for the selected element in the Elements tab on the Developer Tools console.

  • Add the _UNSTABLE suffix to the rules property.

A rule is defined in a JSON notation for styles, rather than direct CSS.

rules_UNSTABLE: {
      '{selector1}' : {
        "{css-property-name}" : "{value}",
        "{css-property-name2}" : "{value}"
    },
    '{selector2}'...
}

The selector to get the appropriate element may only require a simple standard id or class identifier like .classname or #idName, or it may need to be a complex CSS selector involving bracket syntax and other complex operators. The following are examples of selector syntax to try in the rules section to isolate a particular element:

  • '.bk-filter-option'

  • '[id="bk-filter-option"]'

  • '[class="sage-search-bar-module__undoRedoResetWrapper"]'

  • '[class="className"] [aria-colid="6"]'

  • '[data-tour-id="chart-switcher-id"]'

The following example shows how to change the background color of the All Tags and All Authors dropdowns on the Home page of the ThoughtSpot application.

init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        style: {
            customCSS: {
                rules_UNSTABLE: {
                    '[data-testid="select-dropdown-header"]':{
                    "background-color":"#ABC7F9"
                }
            }
         },
      },
   },
});

The following figure shows the style override applied using the preceding code example:

selection dropdown style override

Customize text strings🔗

You can customize text strings on the ThoughtSpot application interface via customizations object in the SDK. The following example shows how to customize text strings on the ThoughtSpot pages:

init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        content: {
            strings: {
                "Liveboard": "Dashboard",
                "Edit": "Modify",
                "Show underlying data": "Show source data",
                "SpotIQ": "Insights",
                "Monitor": "Alerts",
                "Worksheets": "Data model"
            }
        }
    }
});

Limitations🔗

Note the following limitations:

  • The text strings are case-sensitive.

  • Customization of user-defined text strings such as object names, title, or description text is not supported.

  • The latest entry in the strings object takes precedence over other substring overrides. For example, if the Liveboard text string is defined as Dashboard and the next substring Pin to Liveboard is defined as Save, all instances of Liveboard will change to Dashboard, but Pin to Liveboard will be customized as Save.

    customizations: {
        content: {
            strings: {
              "Liveboard": "Dashboard",
              "Pin to Liveboard": "Save",
            }
        }
    }

    However, if the order of the string changes as shown in the following example, the later string customization entry will take precedence; which means that the second entry "Liveboard": "Dashboard" will drive the original copy in ThoughtSpot’s user interface Pin to Liveboard to be customized as Pin to Dashboard, and the string customization "Pin to Liveboard": "Save" will be ignored.

    customizations: {
        content: {
            strings: {
              "Pin to Liveboard": "Save",
              "Liveboard": "Dashboard",

            }
        }
    }

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:

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

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

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

  4. Save the icon sprite file on a Web server.

  5. Add the SVG hosting domain to the CSP connect-src domains allowlist on the Develop > Security Settings page. For more information, see Security Settings.

  6. 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"
 }

  7. Load the application page and check the icon.

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

    Before

    Before icon override

    After

    After icon override

Additional resources🔗