From 3a5fe3fb92cdc7397cbfd3d0869833ea1f1fe8d5 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 4 Feb 2019 14:41:11 +0000
Subject: [PATCH] fix icon clashes in adf-icon (#4258)

---
 demo-shell/src/app/components/icons/icons.component.html | 8 ++++----
 docs/core/icon.component.md                              | 5 +++--
 lib/core/icon/icon.component.ts                          | 7 +------
 lib/core/icon/icon.module.ts                             | 4 ++++
 lib/core/services/thumbnail.service.ts                   | 5 ++++-
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/demo-shell/src/app/components/icons/icons.component.html b/demo-shell/src/app/components/icons/icons.component.html
index 7fd66b2bbe..45cf6499a6 100644
--- a/demo-shell/src/app/components/icons/icons.component.html
+++ b/demo-shell/src/app/components/icons/icons.component.html
@@ -9,12 +9,12 @@
 <div>
     <div><strong>Markup:</strong></div>
     <pre>
-    &lt;adf-icon value="alarm"&gt;&lt;/adf-icon&gt;</pre>
+    &lt;adf-icon value="folder"&gt;&lt;/adf-icon&gt;</pre>
 </div>
 
 <div>
     <div><strong>Result:</strong></div>
-    <adf-icon value="alarm"></adf-icon>
+    <adf-icon value="folder"></adf-icon>
 </div>
 
 <h2>Named icons</h2>
@@ -50,10 +50,10 @@
 <div>
     <div><strong>Markup:</strong></div>
     <pre>
-    &lt;adf-icon value="image/gif"&gt;&lt;/adf-icon&gt;</pre>
+    &lt;adf-icon value="adf:folder"&gt;&lt;/adf-icon&gt;</pre>
 </div>
 
 <div>
     <div><strong>Result:</strong></div>
-    <adf-icon value="image/gif"></adf-icon>
+    <adf-icon value="adf:folder"></adf-icon>
 </div>
diff --git a/docs/core/icon.component.md b/docs/core/icon.component.md
index 64d4f6ccea..5e465d27c9 100644
--- a/docs/core/icon.component.md
+++ b/docs/core/icon.component.md
@@ -71,10 +71,11 @@ In the HTML, you can now use the icon as shown below:
 
 ### Thumbnail Service
 
-You can also use icons registered with the [Thumbnail Service](thumbnail.service.md):
+You can also reference the icons registered with the [Thumbnail Service](thumbnail.service.md)
+by utilising the `adf:` namespace.
 
 ```html
-<adf-icon value="image/gif"></adf-icon>
+<adf-icon value="adf:image/gif"></adf-icon>
 ```
 
 ## See also
diff --git a/lib/core/icon/icon.component.ts b/lib/core/icon/icon.component.ts
index 4f1c74c66a..8df1c3cfb6 100644
--- a/lib/core/icon/icon.component.ts
+++ b/lib/core/icon/icon.component.ts
@@ -21,7 +21,6 @@ import {
     ViewEncapsulation,
     ChangeDetectionStrategy
 } from '@angular/core';
-import { ThumbnailService } from '../services/thumbnail.service';
 import { ThemePalette } from '@angular/material';
 
 @Component({
@@ -47,14 +46,10 @@ export class IconComponent {
     @Input()
     set value(value: string) {
         this._value = value || 'settings';
-        this._isCustom =
-            this._value.includes(':') ||
-            this.thumbnailService.mimeTypeIcons[value];
+        this._isCustom = this._value.includes(':');
     }
 
     get isCustom(): boolean {
         return this._isCustom;
     }
-
-    constructor(private thumbnailService: ThumbnailService) {}
 }
diff --git a/lib/core/icon/icon.module.ts b/lib/core/icon/icon.module.ts
index 85792791e9..e4182e99ec 100644
--- a/lib/core/icon/icon.module.ts
+++ b/lib/core/icon/icon.module.ts
@@ -19,6 +19,7 @@ import { NgModule } from '@angular/core';
 import { IconComponent } from './icon.component';
 import { MatIconModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
+import { ThumbnailService } from '../services/thumbnail.service';
 
 @NgModule({
     imports: [
@@ -30,6 +31,9 @@ import { CommonModule } from '@angular/common';
     ],
     exports: [
         IconComponent
+    ],
+    providers: [
+        ThumbnailService
     ]
 })
 export class IconModule {}
diff --git a/lib/core/services/thumbnail.service.ts b/lib/core/services/thumbnail.service.ts
index 64cf354fb1..55fbac475b 100644
--- a/lib/core/services/thumbnail.service.ts
+++ b/lib/core/services/thumbnail.service.ts
@@ -157,7 +157,10 @@ export class ThumbnailService {
 
     constructor(public contentService: ContentService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
         Object.keys(this.mimeTypeIcons).forEach((key) => {
-            matIconRegistry.addSvgIcon(key, sanitizer.bypassSecurityTrustResourceUrl(this.mimeTypeIcons[key]));
+            const url = sanitizer.bypassSecurityTrustResourceUrl(this.mimeTypeIcons[key]);
+
+            matIconRegistry.addSvgIcon(key, url);
+            matIconRegistry.addSvgIconInNamespace('adf', key, url);
         });
     }