edits

Author: ShashiSubramanya

modules/ROOT/pages/customize-icons.adoc

@@ -10,7 +10,7 @@ You can customize the icons on a ThoughtSpot page using an icon sprite SVG file
 
 To override an icon:
 
-. Open the ThoughtSpot application page and locate the icon that you want to replace.
+. Open the ThoughtSpot application page and locate the icon you want to replace.
 .. Right-click on the icon and select *Inspect*.
 .. Inspect the `<svg>` element.
 .. Note the icon ID.
@@ -70,7 +70,7 @@ image::./images/post-icon-override.png[After icon override]
 |======
 
 == Creating an icon override
-The basic structure of an icon override file is:
+The basic structure of an icon override file is shown in the following snippet:
 
 [source,svg]
 ----
@@ -86,16 +86,17 @@ The `<path />` portion within the `<symbol>` tags is the definition of the actua
 
 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 (link:https://www.svgviewer.dev/[here for example]).
+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 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.
 
-`width` and `height` may be directly in the `<svg>` tag directly or as part of `viewBox` property in that tag, or perhaps another tag above the `<path>` tags. Use whatever values from your source SVG in the `viewBox` property of the `<symbol>` tag within your override file.
+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:
@@ -106,19 +107,23 @@ You can add the `fill` property to the `<symbol>` tag to define a different fill
 ----
 
 == Testing an icon override file
-The link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[Visual Embed SDK Playground^] allows you to easily try out the icon customization framework.
-
-If you check the *Apply custom styles* box, the `customizations` section appears with the default for CSS.
+The +++<a href="{{navprefix}}/dev-playground">Visual Embed SDK Playground </a>+++ allows you to try out the icon customization framework.
 
-Paste the following over the entire customization section that appears in the code window:
+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:
++
 [source,JavaScript]
 ----
  customizations: {
     iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
  }
 ----
 
-In the public playground linked above, anything from `cdn.jsdeliver.net` is already allowed.
-
-On your own cluster, make sure to allow any domain you will host the SVG file from via xref:security-settings.adoc[security settings], in the *CSP img-src domains* section.
+[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].
+====