From 8c2bc29744446e1231f3ffc2218bfa3b419221b2 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Tue, 16 Jan 2018 12:58:10 +0100
Subject: [PATCH 1/2] Fix for FileTypeIcon in extensions

---
 CHANGELOG.md                                       | 6 +++++-
 docs/documentation/docs/about/release-notes.md     | 4 ++++
 package.json                                       | 4 ++--
 src/controls/fileTypeIcon/FileTypeIcon.module.scss | 7 +++++++
 src/controls/fileTypeIcon/FileTypeIcon.tsx         | 8 ++++++--
 5 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/controls/fileTypeIcon/FileTypeIcon.module.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 740167601..cc89cf5e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # Releases
 
+## 1.1.3
+
+- `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.
+
 ## 1.1.2
 
-- Fix for WebPartTitle control to inherit color
+- Fix for `WebPartTitle` control to inherit color
 - Improved telemetry with some object checks
 
 ## 1.1.1
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
index 740167601..10cb092ce 100644
--- a/docs/documentation/docs/about/release-notes.md
+++ b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,9 @@
 # Releases
 
+## 1.1.3
+
+- `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.
+
 ## 1.1.2
 
 - Fix for WebPartTitle control to inherit color
diff --git a/package.json b/package.json
index 168d166b8..0389d76a3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -58,6 +58,6 @@
     "url": "https://github.com/SharePoint/sp-dev-fx-controls-react/issues"
   },
    "main":"lib/index.js",
-  
+
   "homepage": "https://github.com/SharePoint/sp-dev-fx-controls-react"
 }
diff --git a/src/controls/fileTypeIcon/FileTypeIcon.module.scss b/src/controls/fileTypeIcon/FileTypeIcon.module.scss
new file mode 100644
index 000000000..ee3b35833
--- /dev/null
+++ b/src/controls/fileTypeIcon/FileTypeIcon.module.scss
@@ -0,0 +1,7 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+// Retrieve all the CSS classes for brand icons from Office UI Fabric
+:global {
+  @import '~office-ui-fabric-react/dist/sass/mixins/BrandIcon.Mixins';
+  @import '~office-ui-fabric-react/dist/sass/BrandIcon';
+}
diff --git a/src/controls/fileTypeIcon/FileTypeIcon.tsx b/src/controls/fileTypeIcon/FileTypeIcon.tsx
index 850c5da24..41833f0b1 100644
--- a/src/controls/fileTypeIcon/FileTypeIcon.tsx
+++ b/src/controls/fileTypeIcon/FileTypeIcon.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96 } from './IFileTypeIcon';
 import * as appInsights from '../../common/appInsights';
+import { Icon, IconType as IconUIType } from 'office-ui-fabric-react/lib/components/Icon';
+import * as styles from './FileTypeIcon.module.scss';
 
 const ICON_GENERIC = 'Page';
 const ICON_DEFAULT_SIZE = 'icon16';
@@ -186,7 +188,8 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       const iconImage = this._getIconImageName();
       // Check if the image was found, otherwise a generic image will be returned
       if (typeof iconImage.image !== 'undefined' && iconImage.image !== null) {
-        iconElm = <div style={{ display: 'inline-block' }} className={`ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}`}></div>;
+        // iconElm = <div style={{ display: 'inline-block' }} className={`ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}`}></div>;
+        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image
         let imgElm = <img />;
@@ -215,7 +218,8 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     } else {
       // Return the icon font element
       const iconClass = this._getIconClassName();
-      iconElm = <i className={`ms-Icon ms-Icon--${iconClass}`} aria-hidden='true'></i>;
+      // iconElm = <i className={`ms-Icon ms-Icon--${iconClass}`} aria-hidden='true'></i>;
+      iconElm = <Icon iconName={iconClass} />;
     }
 
     // Return the icon element

From 71f90ab4696e479aa6f3a6bb3a7277c29f844f85 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Tue, 16 Jan 2018 13:06:28 +0100
Subject: [PATCH 2/2] Updated generic icons

---
 src/controls/fileTypeIcon/FileTypeIcon.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/controls/fileTypeIcon/FileTypeIcon.tsx b/src/controls/fileTypeIcon/FileTypeIcon.tsx
index 41833f0b1..fbbbea69b 100644
--- a/src/controls/fileTypeIcon/FileTypeIcon.tsx
+++ b/src/controls/fileTypeIcon/FileTypeIcon.tsx
@@ -188,7 +188,6 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       const iconImage = this._getIconImageName();
       // Check if the image was found, otherwise a generic image will be returned
       if (typeof iconImage.image !== 'undefined' && iconImage.image !== null) {
-        // iconElm = <div style={{ display: 'inline-block' }} className={`ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}`}></div>;
         iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image
@@ -196,16 +195,16 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
         // Check the size of the generic image which has to be returned
         switch (iconImage.size) {
           case 'icon16':
-          imgElm = <img src={ICON_GENERIC_16} />;
+          imgElm = <Icon iconType={IconUIType.image} imageProps={{ src: ICON_GENERIC_16 }} />;
           break;
           case 'icon48':
-          imgElm = <img src={ICON_GENERIC_48} />;
+          imgElm = <Icon iconType={IconUIType.image} imageProps={{ src: ICON_GENERIC_48}} />;
           break;
           case 'icon96':
-          imgElm = <img src={ICON_GENERIC_96} />;
+          imgElm = <Icon iconType={IconUIType.image} imageProps={{ src: ICON_GENERIC_96}} />;
           break;
           default:
-          imgElm = <img src={ICON_GENERIC_16} />;
+          imgElm = <Icon iconType={IconUIType.image} imageProps={{ src: ICON_GENERIC_16}} />;
           break;
         }
 
@@ -218,7 +217,6 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     } else {
       // Return the icon font element
       const iconClass = this._getIconClassName();
-      // iconElm = <i className={`ms-Icon ms-Icon--${iconClass}`} aria-hidden='true'></i>;
       iconElm = <Icon iconName={iconClass} />;
     }