refactor(icon-service): cache svg icons as text

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -68,10 +68,6 @@
             width: inherit;
             height: inherit;
             fill: currentColor;
-
-            use {
-                pointer-events: none;
-            }
         }
     }
 

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -162,7 +162,7 @@ <h6 class="igx-filter-empty__title">
                         <igx-icon family="imx-icons" [name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
                         </igx-icon>
                     </igx-prefix>
-                    <igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
+                    <igx-select-item *ngFor="let condition of getConditionList()" [value]="condition" [text]="getConditionFriendlyName(condition)">
                         <div class="igx-grid__filtering-dropdown-items">
                             <igx-icon family="imx-icons"
                                       [name]="selectedColumn.filters.condition(condition).iconName">

projects/igniteui-angular/src/lib/icon/icon.component.html

@@ -5,9 +5,13 @@
 </ng-template>
 
 <ng-template #svgImage>
-    <svg>
-        <use [attr.href]="getSvgKey"></use>
-    </svg>
+    <svg
+        viewBox="0 0 24 24"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        [innerHTML]="getSvg"
+    ></svg>
 </ng-template>
 
 <ng-container *ngTemplateOutlet="template"></ng-container>

projects/igniteui-angular/src/lib/icon/icon.component.ts

@@ -3,6 +3,7 @@ import { IgxIconService } from './icon.service';
 import { first, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 /**
  * Icon provides a way to include material icons to markup
@@ -114,16 +115,20 @@ export class IgxIconComponent implements OnInit, OnDestroy {
 
     private destroy$ = new Subject<void>();
 
-    constructor(public el: ElementRef,
-                private iconService: IgxIconService,
-                private ref: ChangeDetectorRef) {
+    constructor(
+        public el: ElementRef,
+        private iconService: IgxIconService,
+        private ref: ChangeDetectorRef,
+        private sanitizer: DomSanitizer
+    ) {
         this.family = this.iconService.defaultFamily;
         this.iconService.registerFamilyAlias('material', 'material-icons');
-        this.iconService.iconLoaded.pipe(
-            first(e => e.name === this.name && e.family === this.family),
-            takeUntil(this.destroy$)
-        )
-        .subscribe(() => this.ref.detectChanges());
+        this.iconService.iconLoaded
+            .pipe(
+                first((e) => e.name === this.name && e.family === this.family),
+                takeUntil(this.destroy$)
+            )
+            .subscribe(() => this.ref.detectChanges());
     }
 
     /**
@@ -226,21 +231,22 @@ export class IgxIconComponent implements OnInit, OnDestroy {
     }
 
     /**
-     *  An accessor that returns the key of the SVG image.
-     *  The key consists of the font-family and the name separated by underscore.
+     *  An accessor that returns the underlying SVG image as SafeHtml.
      *
      * @example
      * ```typescript
      * @ViewChild("MyIcon")
      * public icon: IgxIconComponent;
      * ngAfterViewInit() {
-     *    let svgKey = this.icon.getSvgKey;
+     *    let svg: SafeHtml = this.icon.getSvg;
      * }
      * ```
      */
-    public get getSvgKey(): string {
+    public get getSvg(): SafeHtml {
         if (this.iconService.isSvgIconCached(this.name, this.family)) {
-            return '#' + this.iconService.getSvgIconKey(this.name, this.family);
+            const svgText = this.iconService.getSvgIcon(this.name, this.family);
+            const svg = this.sanitizer.bypassSecurityTrustHtml(svgText);
+            return svg;
         }
 
         return null;

projects/igniteui-angular/src/lib/icon/icon.service.spec.ts

@@ -1,6 +1,5 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed, fakeAsync } from '@angular/core/testing';
 import { IgxIconService } from './icon.service';
-import { DOCUMENT } from '@angular/common';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { first } from 'rxjs/operators';
@@ -53,13 +52,11 @@ describe('Icon Service', () => {
         expect(iconService.familyClassName(ALIAS)).toBe(MY_FONT);
     });
 
-    it('should add custom svg icon from url', () => {
+    it('should add custom svg icon from url', fakeAsync((done) => {
         const iconService = TestBed.inject(IgxIconService) as IgxIconService;
-        const document = TestBed.inject(DOCUMENT);
 
         const name = 'test';
         const family = 'svg-icons';
-        const iconKey = family + '_' + name;
 
         spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
         spyOn(XMLHttpRequest.prototype, 'send');
@@ -69,25 +66,20 @@ describe('Icon Service', () => {
         expect(XMLHttpRequest.prototype.open).toHaveBeenCalledTimes(1);
         expect(XMLHttpRequest.prototype.send).toHaveBeenCalledTimes(1);
 
-        const svgElement = document.querySelector(`svg[id='${iconKey}']`);
-        expect(svgElement).toBeDefined();
-    });
+        iconService.iconLoaded.pipe().subscribe(() => {
+            expect(iconService.isSvgIconCached(name, family)).toBeTruthy();
+            done();
+        });
+    }));
 
     it('should add custom svg icon from text', () => {
         const iconService = TestBed.inject(IgxIconService) as IgxIconService;
-        const document = TestBed.inject(DOCUMENT);
 
         const name = 'test';
         const family = 'svg-icons';
-        const iconKey = family + '_' + name;
 
         iconService.addSvgIconFromText(name, svgText, family);
-
         expect(iconService.isSvgIconCached(name, family)).toBeTruthy();
-        expect(iconService.getSvgIconKey(name, family)).toEqual(iconKey);
-
-        const svgElement = document.querySelector(`svg[id='${iconKey}']`);
-        expect(svgElement).toBeDefined();
     });
 
     it('should emit loading event for a custom svg icon from url', done => {
@@ -113,17 +105,4 @@ describe('Icon Service', () => {
 
         iconService.addSvgIcon(name, 'test.svg', family);
     });
-
-    it('should create svg container inside the body', () => {
-        const iconService = TestBed.inject(IgxIconService) as IgxIconService;
-        const document = TestBed.inject(DOCUMENT);
-
-        const name = 'test';
-        const family = 'svg-icons';
-
-        iconService.addSvgIconFromText(name, svgText, family);
-
-        const svgContainer = document.body.querySelector('.igx-svg-container');
-        expect(svgContainer).not.toBeNull();
-    });
 });

projects/igniteui-angular/src/lib/icon/icon.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, SecurityContext, Inject, OnDestroy, Optional } from '@angular/core';
+import { Injectable, SecurityContext, Inject, Optional } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
@@ -32,7 +32,7 @@ export interface IgxIconLoadedEvent {
 @Injectable({
     providedIn: 'root'
 })
-export class IgxIconService implements OnDestroy {
+export class IgxIconService {
     /**
      * Observable that emits when an icon is successfully loaded
      * through a HTTP request.
@@ -46,8 +46,7 @@ export class IgxIconService implements OnDestroy {
 
     private _family = 'material-icons';
     private _familyAliases = new Map<string, string>();
-    private _svgContainer: HTMLElement;
-    private _cachedSvgIcons: Set<string> = new Set<string>();
+    private _cachedSvgIcons = new Map<string, Map<string, string>>();
     private _iconLoaded = new Subject<IgxIconLoadedEvent>();
 
     constructor(
@@ -58,14 +57,6 @@ export class IgxIconService implements OnDestroy {
         this.iconLoaded = this._iconLoaded.asObservable();
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public ngOnDestroy(): void {
-        this.cleanSvgContainer();
-    }
-
     /**
      *  Returns the default font-family.
      * ```typescript
@@ -162,18 +153,25 @@ export class IgxIconService implements OnDestroy {
      * ```
      */
     public isSvgIconCached(name: string, family: string = ''): boolean {
-        const iconKey = this.getSvgIconKey(name, family);
-        return this._cachedSvgIcons.has(iconKey);
+        if(this._cachedSvgIcons.has(family)) {
+            const familyRegistry = this._cachedSvgIcons.get(family) as Map<string, string>;
+            return familyRegistry.has(name);
+        }
+
+        return false;
     }
 
     /**
-     *  Returns the key of a cached SVG image.
+     *  Returns the cached SVG image as string.
      * ```typescript
-     *   const svgIconKey = this.iconService.getSvgIconKey('aruba', 'svg-flags');
+     *   const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags');
      * ```
      */
-    public getSvgIconKey(name: string, family: string = '') {
-        return family + '_' + name;
+    public getSvgIcon(name: string, family: string = '') {
+        if(this._cachedSvgIcons.has(family)) {
+            const familyRegistry = this._cachedSvgIcons.get(family) as Map<string, string>;
+            return familyRegistry.get(name);
+        }
     }
 
     /**
@@ -184,57 +182,23 @@ export class IgxIconService implements OnDestroy {
         return req;
     }
 
-    /**
-     * @hidden
-     */
-    private cleanSvgContainer() {
-        const container = this._document.documentElement.querySelector('.igx-svg-container');
-
-        while (container.firstChild) {
-            container.removeChild(container.firstChild);
-        }
-    }
-
     /**
      * @hidden
      */
     private cacheSvgIcon(name: string, value: string, family: string = '') {
         if (name && value) {
-            this.ensureSvgContainerCreated();
-
-            const div = this._document.createElement('DIV');
+            const div = this._document.createElement('div');
             div.innerHTML = value;
             const svg = div.querySelector('svg') as SVGElement;
 
-            if (svg) {
-                const iconKey = this.getSvgIconKey(name, family);
+            if (!this._cachedSvgIcons.has(family)) {
+                this._cachedSvgIcons.set(family, new Map<string, string>());
+            }
 
-                svg.setAttribute('id', iconKey);
+            if (svg) {
                 svg.setAttribute('fit', '');
                 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-                svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
-
-                if (this.isSvgIconCached(name, family)) {
-                    const oldChild = this._svgContainer.querySelector(`svg[id='${iconKey}']`);
-                    this._svgContainer.removeChild(oldChild);
-                }
-
-                this._svgContainer.appendChild(svg);
-                this._cachedSvgIcons.add(iconKey);
-            }
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    private ensureSvgContainerCreated() {
-        if (!this._svgContainer) {
-            this._svgContainer = this._document.documentElement.querySelector('.igx-svg-container');
-            if (!this._svgContainer) {
-                this._svgContainer = this._document.createElement('DIV');
-                this._svgContainer.classList.add('igx-svg-container');
-                this._document.body.appendChild(this._svgContainer);
+                this._cachedSvgIcons.get(family).set(name, svg.outerHTML);
             }
         }
     }