From 45cd8188a6990f73cb65ead22c6dc9e9882f2b90 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 28 Oct 2021 11:28:25 +0300
Subject: [PATCH] feat(icon-service): optionally remove title and desc when
 caching (#10364)

Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>
---
 .../src/lib/icon/icon.service.ts              | 30 ++++++++++++++-----
 src/app/icon/icon.sample.ts                   |  2 +-
 src/assets/svg/filtering/copy.svg             |  2 ++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts
index bab19ccea38..f9c5ec77c63 100644
--- a/projects/igniteui-angular/src/lib/icon/icon.service.ts
+++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts
@@ -105,7 +105,7 @@ export class IgxIconService {
      *   this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
      * ```
      */
-    public addSvgIcon(name: string, url: string, family = this._family) {
+    public addSvgIcon(name: string, url: string, family = this._family, stripMeta = false) {
         if (name && url) {
             const safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(url);
             if (!safeUrl) {
@@ -119,7 +119,7 @@ export class IgxIconService {
 
             if (!this.isSvgIconCached(name, family)) {
                 this.fetchSvg(url).subscribe((res) => {
-                    this.cacheSvgIcon(name, res, family);
+                    this.cacheSvgIcon(name, res, family, stripMeta);
                     this._iconLoaded.next({ name, value: res, family });
                 });
             }
@@ -135,13 +135,13 @@ export class IgxIconService {
      *   <path d="M74 74h54v54H74" /></svg>', 'svg-flags');
      * ```
      */
-    public addSvgIconFromText(name: string, iconText: string, family: string = '') {
+    public addSvgIconFromText(name: string, iconText: string, family: string = '', stripMeta = false) {
         if (name && iconText) {
-            if(this.isSvgIconCached(name, family)) {
+            if (this.isSvgIconCached(name, family)) {
                 return;
             }
 
-            this.cacheSvgIcon(name, iconText, family);
+            this.cacheSvgIcon(name, iconText, family, stripMeta);
         } else {
             throw new Error('You should provide at least `name` and `iconText` to register an svg icon.');
         }
@@ -155,7 +155,7 @@ export class IgxIconService {
      */
     public isSvgIconCached(name: string, family: string = ''): boolean {
         const familyClassName = this.familyClassName(family);
-        if(this._cachedSvgIcons.has(familyClassName)) {
+        if (this._cachedSvgIcons.has(familyClassName)) {
             const familyRegistry = this._cachedSvgIcons.get(familyClassName) as Map<string, SafeHtml>;
             return familyRegistry.has(name);
         }
@@ -185,7 +185,9 @@ export class IgxIconService {
     /**
      * @hidden
      */
-    private cacheSvgIcon(name: string, value: string, family: string = '') {
+    private cacheSvgIcon(name: string, value: string, family = this._family, stripMeta: boolean) {
+        family = !!family ? family : this._family;
+
         if (name && value) {
             const doc = this._domParser.parseFromString(value, 'image/svg+xml');
             const svg = doc.querySelector('svg') as SVGElement;
@@ -197,6 +199,20 @@ export class IgxIconService {
             if (svg) {
                 svg.setAttribute('fit', '');
                 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+                if (stripMeta) {
+                    const title = svg.querySelector('title');
+                    const desc = svg.querySelector('desc');
+
+                    if (title) {
+                        svg.removeChild(title);
+                    }
+
+                    if (desc) {
+                        svg.removeChild(desc);
+                    }
+                }
+
                 const safeSvg = this._sanitizer.bypassSecurityTrustHtml(svg.outerHTML);
                 this._cachedSvgIcons.get(family).set(name, safeSvg);
             }
diff --git a/src/app/icon/icon.sample.ts b/src/app/icon/icon.sample.ts
index 743d15d4b05..e541d70e512 100644
--- a/src/app/icon/icon.sample.ts
+++ b/src/app/icon/icon.sample.ts
@@ -19,6 +19,6 @@ export class IconSampleComponent implements OnInit {
         this._iconService.addSvgIcon('equals', '/assets/svg/filtering/equals.svg', 'svg-flags');
         this._iconService.addSvgIcon('is_empty', '/assets/svg/filtering/is_empty.svg', 'svg-flags');
         this._iconService.addSvgIcon('starts_with', '/assets/svg/filtering/starts_with.svg', 'svg-flags');
-        this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg');
+        this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg', '', true);
     }
 }
diff --git a/src/assets/svg/filtering/copy.svg b/src/assets/svg/filtering/copy.svg
index 9837dbd779f..c76fc91d140 100644
--- a/src/assets/svg/filtering/copy.svg
+++ b/src/assets/svg/filtering/copy.svg
@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+   <title>Some Title</title>
+   <desc>Some Description</desc>
    <path d="M 2.7324219,0 A 2.7369999,2.7369999 0 0 0 0,2.734375 v 10.53125 A 2.738,2.738 0 0 0 2.7324219,16 H 4 v 1.265625 A 2.738,2.738 0 0 0 6.7324219,20 H 17.267578 A 2.738,2.738 0 0 0 20,17.265625 V 6.734375 A 2.7369999,2.7369999 0 0 0 17.267578,4 H 16 V 2.734375 A 2.7369999,2.7369999 0 0 0 13.267578,0 Z m 0,2 H 13.267578 A 0.73399997,0.73399997 0 0 1 14,2.734375 V 6 H 2 V 2.734375 A 0.73399997,0.73399997 0 0 1 2.7324219,2 Z M 9,3 A 0.99999995,0.99999995 0 0 0 8,4 0.99999995,0.99999995 0 0 0 9,5 0.99999995,0.99999995 0 0 0 10,4 0.99999995,0.99999995 0 0 0 9,3 Z m 3.007812,0 A 0.99999999,0.99999999 0 1 0 12.917969,4.3964844 0.99999999,0.99999999 0 0 0 12.396484,3.0820312 0.99999999,0.99999999 0 0 0 12.007812,3 Z M 16,6 h 1.267578 A 0.73399997,0.73399997 0 0 1 18,6.734375 V 10 H 16 Z M 2,8 h 12 v 5.265625 A 0.73399997,0.73399997 0 0 1 13.267578,14 H 2.7324219 A 0.73399997,0.73399997 0 0 1 2,13.265625 Z m 14,4 h 2 v 5.265625 A 0.73399997,0.73399997 0 0 1 17.267578,18 H 6.7324219 A 0.73399997,0.73399997 0 0 1 6,17.265625 V 16 h 7.267578 A 2.738,2.738 0 0 0 16,13.265625 Z" />
 </svg>