From ef2fcd3bf1e0e8eee9a874ada94d234093300305 Mon Sep 17 00:00:00 2001
From: vicabhu <victor.perez.cordova.lobato@gmail.com>
Date: Thu, 4 Apr 2024 13:51:32 +0200
Subject: [PATCH] Added documentation of how to use SVG Strings as custom icon.

---
 components/doc/customicons/svgstringdoc.js | 27 ++++++++++++++++++++++
 pages/customicons/index.js                 |  6 +++++
 2 files changed, 33 insertions(+)
 create mode 100644 components/doc/customicons/svgstringdoc.js

diff --git a/components/doc/customicons/svgstringdoc.js b/components/doc/customicons/svgstringdoc.js
new file mode 100644
index 0000000000..f41641405c
--- /dev/null
+++ b/components/doc/customicons/svgstringdoc.js
@@ -0,0 +1,27 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SVGStringDoc(props) {
+    const code = {
+        basic: `
+const svgMarkupString = "<svg xmlns=\\"http:\\/\\/www.w3.org\\/2000\\/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" >
+    <g id=\\"chevron-down\\">
+        <path d=\\"M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z\\" \\/>
+    <\\/g>
+<\\/svg>";
+
+<Dropdown dropdownIcon={(options) =>
+    <span dangerouslySetInnerHTML={{ __html: svgMarkupString }} {...options.iconProps} />
+} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>SVG markup strings can also be embedded as icons by using "i" or "span" tags.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/pages/customicons/index.js b/pages/customicons/index.js
index 108a606b9e..60425fd83c 100644
--- a/pages/customicons/index.js
+++ b/pages/customicons/index.js
@@ -3,6 +3,7 @@ import { FontAwesomeDoc } from '@/components/doc/customicons/fontawesomedoc';
 import { ImageDoc } from '@/components/doc/customicons/imagedoc';
 import { MaterialDoc } from '@/components/doc/customicons/materialdoc';
 import { SVGDoc } from '@/components/doc/customicons/svgdoc';
+import { SVGStringDoc } from '@/components/doc/customicons/svgstringdoc';
 
 const ContextMenuDemo = () => {
     const docs = [
@@ -21,6 +22,11 @@ const ContextMenuDemo = () => {
             label: 'SVG',
             component: SVGDoc
         },
+        {
+            id: 'svgstring',
+            label: 'SVG String',
+            component: SVGStringDoc
+        },
         {
             id: 'image',
             label: 'Image',