icon override steps

modules/ROOT/pages/customize-icons.adoc

@@ -14,6 +14,7 @@ You can customize the icons on a ThoughtSpot page using an icon sprite SVG file
 .. On your ThoughtSpot instance, right-click on the icon and select *Inspect*.
 .. Inspect the `<svg>` element.
 .. Note the icon ID.
+
 * Add the SVG hosting domain 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]
@@ -60,9 +61,35 @@ You can add the `fill` property to the `<symbol>` tag to define a different fill
 == Override an icon
 To override an icon:
 
-. Create an icon sprite file with the SVG element, define the properties, and specify the icon ID.
+. Ensure that you have the icon ID of the icon you want to replace.
++
+The following figure illustrates how to locate the Spotter icon ID in the embed Playground:
++
+[.widthAuto]
+[.bordered]
+image::./images/locate-icon-customization.png[Locate icon ID]
+
+. To replace the icon with an SVG, open the icon in a web browser, click **Inspect**, and then copy the SVG code.
+. Create an icon sprite file with the SVG code.
+. In the `<symbol>` element, specify ID of the icon you want to replace. For example, `rd-icon-spotter`.
+. Modify the xref:#_viewbox_property[viewBox] and xref:_fill_property[fill] properties as required.
++
+Th following code snippet shows an example of the SVG code for the icon sprite that overrides the Spotter icon:
++
+[source,HTML]
+----
+<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-spotter" viewBox="0 0 48 48" fill="black">
+      <path xmlns="http://www.w3.org/2000/svg" d="M45.6,18.7,41,14.9V7.5a1,1,0,0,0-.6-.9L30.5,2.1h-.4l-.6.2L24,5.9,18.5,2.2,17.9,2h-.4L7.6,6.6a1,1,0,0,0-.6.9v7.4L2.4,18.7a.8.8,0,0,0-.4.8v9H2a.8.8,0,0,0,.4.8L7,33.1v7.4a1,1,0,0,0,.6.9l9.9,4.5h.4l.6-.2L24,42.1l5.5,3.7.6.2h.4l9.9-4.5a1,1,0,0,0,.6-.9V33.1l4.6-3.8a.8.8,0,0,0,.4-.7V19.4h0A.8.8,0,0,0,45.6,18.7Zm-5.1,6.8H42v1.6l-3.5,2.8-.4.3-.4-.2a1.4,1.4,0,0,0-2,.7,1.5,1.5,0,0,0,.6,2l.7.3h0v5.4l-6.6,3.1-4.2-2.8-.7-.5V25.5H27a1.5,1.5,0,0,0,0-3H25.5V9.7l.7-.5,4.2-2.8L37,9.5v5.4h0l-.7.3a1.5,1.5,0,0,0-.6,2,1.4,1.4,0,0,0,1.3.9l.7-.2.4-.2.4.3L42,20.9v1.6H40.5a1.5,1.5,0,0,0,0,3ZM21,25.5h1.5V38.3l-.7.5-4.2,2.8L11,38.5V33.1h0l.7-.3a1.5,1.5,0,0,0,.6-2,1.4,1.4,0,0,0-2-.7l-.4.2-.4-.3L6,27.1V25.5H7.5a1.5,1.5,0,0,0,0-3H6V20.9l3.5-2.8.4-.3.4.2.7.2a1.4,1.4,0,0,0,1.3-.9,1.5,1.5,0,0,0-.6-2L11,15h0V9.5l6.6-3.1,4.2,2.8.7.5V22.5H21a1.5,1.5,0,0,0,0,3Z"/>
+      <path xmlns="http://www.w3.org/2000/svg" d="M13.9,9.9a1.8,1.8,0,0,0,0,2.2l2.6,2.5v2.8l-4,4v5.2l4,4v2.8l-2.6,2.5a1.8,1.8,0,0,0,0,2.2,1.5,1.5,0,0,0,1.1.4,1.5,1.5,0,0,0,1.1-.4l3.4-3.5V29.4l-4-4V22.6l4-4V13.4L16.1,9.9A1.8,1.8,0,0,0,13.9,9.9Z"/>
+      <path xmlns="http://www.w3.org/2000/svg" d="M31.5,14.6l2.6-2.5a1.8,1.8,0,0,0,0-2.2,1.8,1.8,0,0,0-2.2,0l-3.4,3.5v5.2l4,4v2.8l-4,4v5.2l3.4,3.5a1.7,1.7,0,0,0,2.2,0,1.8,1.8,0,0,0,0-2.2l-2.6-2.5V30.6l4-4V21.4l-4-4Z"/>
+   </symbol>
+</svg>
+----
+
 +
-The following code snippet shows how to override the chart icon  (`rd-icon-chart`) on the *Answers* page.
+The following example overrides the chart icon  (`rd-icon-chart`) on the *Answers* page.
 +
 [source,HTML]
 ----
@@ -75,9 +102,8 @@ The following code snippet shows how to override the chart icon  (`rd-icon-chart
    </symbol>
 </svg>
 ----
-+
 
-To override multiple icons, use the following format:
+. To override multiple icons at once, you can use the following format:
 +
 [source,HTML]
 ----