SCAL-239166 fixes

modules/ROOT/pages/customize-icons.adoc

@@ -8,14 +8,61 @@
 
 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:
+== Before you begin
 
-. Open the ThoughtSpot application page and locate the icon you want to replace.
-.. Right-click on the icon and select *Inspect*.
+* Identify the icons that you want to override.
+.. On your ThoughtSpot instance, right-click on the icon and select *Inspect*.
 .. Inspect the `<svg>` element.
 .. 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.
+* Add the SVG hosting domain is added to the following allowlists on the *Develop* > *Security Settings* page:
+** xref:security-settings.adoc#csp-connect-src[CSP connect-src domains allowlist]
+** xref:security-settings.adoc#csp-trusted-domain[CSP img-src domains allowlist]
++
+* xref:customize-icons.adoc#_try_it_out_in_the_embed_playground[Try out] the icon override code in the embed Playground. For ease of testing, the domain `cdn.jsdeliver.net` is already whitelisted on ThoughtSpot Embedded link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[public playground] and trial sites.
+
+== Create an icon override
+The basic structure of an icon override file is shown in the following snippet:
+
+[source,svg]
+----
+<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 link:https://www.svgviewer.dev/[SVG viewer site, window=_blank].
+
+You only need to copy the `<path>` tags from your example SVG within the `<symbol> </symbol>` tags.
+
+=== viewBox property
+
+The link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[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:
+
+[source,svg]
+----
+<symbol id="rd-icon-spotter" viewBox="0 0 222 225" fill="red">
+----
+
+== Override an icon
+To override an icon:
+
+. Create an icon sprite file with the SVG element, properties, and the icon ID.
++
+The following code snippet shows how to override the chart icon  (`rd-icon-chart`) on the *Answers* page.
 +
 [source,HTML]
 ----
@@ -44,69 +91,54 @@ To override multiple icons, use the following format:
 
 +
 . 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 xref:security-settings.adoc#csp-connect-src[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 link:https://github.com/thoughtspot/custom-css-demo/blob/main/css-variables.css[Custom CSS demo GitHub Repo, window=_blank] to override the chart icon on the *Answers* page (`rd-icon-chart`):
+For example, the following code snippets use the link:https://github.com/thoughtspot/custom-css-demo/blob/main/icon-override1.svg[icon-override1.svg] and link:https://github.com/thoughtspot/custom-css-demo/blob/main/alternate-spotter-icon.svg[alternate-spotter-icon.svg] files in the link:https://github.com/thoughtspot/custom-css-demo[Custom CSS demo GitHub Repo, window=_blank] to override the chart (`rd-icon-chart`) and Spotter (`rd-icon-spotter`) icons respectively:
+
 +
 [source,JavaScript]
 ----
  customizations: {
     iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
  }
 ----
+
++
+[source,JavaScript]
+----
+ init({
+     //...
+     customizations: {
+         iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/alternate-spotter-icon.svg"
+     }
+ });
+----
 . Load the application page and check the icon.
 +
 The following figures show the icons before and after the override.
 +
 [width="100%" cols="6,6"]
 |======
-a|**Before** +
+||
+2+|**Chart icon** on Answers
+a|Before +
 
 image::./images/pre-icon-override.png[Before icon override]
-a|**After** +
+a|After +
 
 image::./images/post-icon-override.png[After icon override]
-|======
-
-== Creating an icon override
-The basic structure of an icon override file is shown in the following snippet:
-
-[source,svg]
-----
-<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 link:https://www.svgviewer.dev/[SVG viewer site, window=_blank].
 
-You only need to copy the `<path>` tags from your example SVG within the `<symbol> </symbol>` tags.
-
-=== viewBox property
+2+|**Spotter icon**
+a|Before +
+[.bordered]
+image::./images/spotter-icon.png[Conversation embed]
+a|After +
+[.bordered]
+image::./images/spotter-icon-customization.png[Spotter icon customization]
 
-The link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[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:
-
-[source,svg]
-----
-<symbol id="rd-icon-spotter" viewBox="0 0 222 225" fill="red">
-----
+|======
 
-== Testing an icon override file
+== Try it out in the embed Playground
 The +++<a href="{{previewPrefix}}/playground/search" target="_blank">Visual Embed SDK Playground </a>+++ allows you to try out the icon customization framework.
 
 To view the code for customization:
@@ -121,9 +153,3 @@ The `customizations` code appears for CSS modifications appears in the code pane
     iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
  }
 ----
-
-[NOTE]
-====
-The `cdn.jsdeliver.net` domain is allowed on ThoughtSpot Embedded link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[public playground] and trial sites.
-On your ThoughtSpot application instance, make sure to add the domain that will host the SVG file to xref:security-settings.adoc#csp-trusted-domain[the *CSP img-src domains* allowlist].
-====