From 34a8651652513a8ee3b4988b8b3ab55de23ba5c8 Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Fri, 16 Feb 2018 14:50:05 -0800
Subject: [PATCH 1/7] Add errorAs callback to Icon

---
 .../src/components/Breadcrumb/Breadcrumb.tsx  |   8 +-
 .../src/components/Button/BaseButton.tsx      |   8 +-
 .../src/components/Check/Check.tsx            |  16 +-
 .../src/components/CommandBar/CommandBar.tsx  |   2 +-
 .../src/components/Icon/Icon.tsx              | 164 ++++++++++--------
 .../src/components/Icon/Icon.types.ts         |   6 +
 6 files changed, 117 insertions(+), 87 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
index 1b3b682702215d..7a9f105e9660f9 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -102,10 +102,10 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
                     directionalHint: DirectionalHint.bottomLeftEdge
                   } }
                 />
-                { Icon({
-                  className: css('ms-Breadcrumb-chevron', styles.chevron),
-                  iconName: getRTL() ? 'ChevronLeft' : 'ChevronRight'
-                }) }
+                { <Icon
+                  className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+                  iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+                /> }
               </li>
             ) }
             { renderedItems.map(
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 7c0ec7e68e7253..6f854abb1e3858 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -254,10 +254,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
        } = this.props;
 
     if (iconProps) {
-      return Icon({
-        ...iconProps,
-        className: this._classNames.icon
-      });
+      return <Icon
+        {...iconProps}
+        className={ this._classNames.icon }
+      />
     }
     return null;
   }
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
index 0141ca290999de..8df86293c35459 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
@@ -48,14 +48,14 @@ export class Check extends BaseComponent<ICheckProps, {}> {
           }
         ) }
       >
-        { Icon({
-          className: 'ms-Check-circle ' + styles.circle,
-          iconName: 'CircleRing'
-        }) }
-        { Icon({
-          className: 'ms-Check-check ' + styles.check,
-          iconName: 'StatusCircleCheckmark'
-        }) }
+        { <Icon
+          className={ 'ms-Check-circle ' + styles.circle }
+          iconName={ 'CircleRing' }
+        /> }
+        { <Icon
+          className={ 'ms-Check-check ' + styles.check }
+          iconName={ 'StatusCircleCheckmark' }
+        /> }
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index 380c19195a352c..e5dbfbca6b880d 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -95,7 +95,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
               'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper',
               styles.searchIconWrapper, styles.searchIconSearchWrapper) }
           >
-            { Icon({ iconName: 'Search' }) }
+            { <Icon iconName={ 'Search' } /> }
           </div>
           <div
             className={ css(
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index d38fecb3baeaea..f2bc455f6e4ab5 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 /* tslint:enable */
 import { IIconProps, IconType } from './Icon.types';
 import { Image } from '../Image/Image';
+import { ImageLoadState } from '../Image/Image.types';
 import {
   css,
   getNativeProps,
@@ -11,79 +12,102 @@ import {
 import { getIcon, IIconRecord } from '../../Styling';
 import { getClassNames } from './Icon.classNames';
 
-export const Icon = (props: IIconProps): JSX.Element => {
-  let {
-    ariaLabel,
-    className,
-    styles,
-    iconName
-   } = props;
-  let classNames = getClassNames(
-    styles
-  );
+export interface IIconState {
+  imageLoadError: boolean;
+}
 
-  if (props.iconType === IconType.image || props.iconType === IconType.Image) {
-    let containerClassName = css(
-      'ms-Icon-imageContainer',
-      classNames.root,
-      classNames.imageContainer,
-      className
-    );
+export class Icon extends React.Component<IIconProps, IIconState> {
+  constructor(props: IIconProps) {
+    super(props);
+    this.state = {
+      imageLoadError: false,
+    }
+  }
 
-    return (
-      <div
-        className={
-          css(
-            containerClassName,
-            classNames.root
-          ) }
-      >
-        <Image { ...props.imageProps as any } />
-      </div>
-    );
-  } else if (typeof iconName === 'string' && iconName.length === 0) {
-    return (
-      <i
-        aria-label={ ariaLabel }
-        { ...(ariaLabel ? {} : {
-          role: 'presentation',
-          'aria-hidden': true
-        }) }
-        { ...getNativeProps(props, htmlElementProperties) }
-        className={
-          css(
-            'ms-Icon-placeHolder',
-            classNames.rootHasPlaceHolder,
-            props.className
-          ) }
-      />
-    );
-  } else {
-    let iconDefinition = getIcon(iconName) || {
-      subset: {
-        className: undefined
-      },
-      code: undefined
-    };
+  private onImageLoadingStateChange = (state: ImageLoadState): void => {
+    if (this.props.imageProps && this.props.imageProps.onLoadingStateChange) {
+      this.props.imageProps.onLoadingStateChange(state);
+    }
+    if (state == ImageLoadState.error) {
+      this.setState({ imageLoadError: true });
+    }
+  }
 
-    return (
-      <i
-        aria-label={ ariaLabel }
-        { ...(ariaLabel ? {} : {
-          role: 'presentation',
-          'aria-hidden': true,
-          'data-icon-name': iconName,
-        }) }
-        { ...getNativeProps(props, htmlElementProperties) }
-        className={
-          css(
-            iconDefinition.subset.className,
-            classNames.root,
-            props.className
-          ) }
-      >
-        { iconDefinition.code }
-      </i>
+  render() {
+    let {
+    ariaLabel,
+      className,
+      styles,
+      iconName,
+      errorAs,
+   } = this.props;
+    let classNames = getClassNames(
+      styles
     );
+
+    const containerProps = ariaLabel ? { 'aria-label': ariaLabel, 'data-icon-name': iconName, } : {
+      role: 'presentation',
+      'aria-hidden': true,
+      'data-icon-name': iconName,
+    }
+
+    if (this.props.iconType === IconType.image || this.props.iconType === IconType.Image) {
+      let containerClassName = css(
+        'ms-Icon-imageContainer',
+        classNames.root,
+        classNames.imageContainer,
+        className
+      );
+      let { imageLoadError } = this.state;
+      let imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange }
+      let ImageType = imageLoadError && errorAs || Image;
+      return (
+        <div
+          {...containerProps}
+          className={
+            css(
+              containerClassName,
+              classNames.root
+            ) }
+        >
+          <ImageType { ...imageProps } />
+        </div>
+      );
+    } else if (typeof iconName === 'string' && iconName.length === 0) {
+      return (
+        <i
+          {...containerProps}
+          { ...getNativeProps(this.props, htmlElementProperties) }
+          className={
+            css(
+              'ms-Icon-placeHolder',
+              classNames.rootHasPlaceHolder,
+              this.props.className
+            ) }
+        />
+      );
+    } else {
+      let iconDefinition = getIcon(iconName) || {
+        subset: {
+          className: undefined
+        },
+        code: undefined
+      };
+
+      return (
+        <i
+          {...containerProps}
+          { ...getNativeProps(this.props, htmlElementProperties) }
+          className={
+            css(
+              iconDefinition.subset.className,
+              classNames.root,
+              this.props.className
+            ) }
+        >
+          { iconDefinition.code }
+        </i>
+      );
+    }
   }
 };
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
index c776f1cfcee22f..0b51d779b143c0 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IImageProps } from '../Image/Image.types';
 import { IStyle } from '../../Styling';
+import { Icon } from './Icon';
 
 // Please keep alphabetized
 export enum IconType {
@@ -65,4 +66,9 @@ export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
    * @memberOf IIconProps
    */
   imageProps?: IImageProps;
+
+  /**
+   * If rendering an image icon, this function callback will be invoked in the event loading the image errors.
+   */
+  errorAs?: (image: IImageProps) => any;
 }
\ No newline at end of file

From d7761f3fa453971db0da7e5f622024cba72616a1 Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Fri, 16 Feb 2018 14:52:01 -0800
Subject: [PATCH 2/7] change name

---
 packages/office-ui-fabric-react/src/components/Icon/Icon.tsx  | 4 ++--
 .../office-ui-fabric-react/src/components/Icon/Icon.types.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index f2bc455f6e4ab5..20f97bd67e01e8 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -39,7 +39,7 @@ export class Icon extends React.Component<IIconProps, IIconState> {
       className,
       styles,
       iconName,
-      errorAs,
+      imageErrorAs,
    } = this.props;
     let classNames = getClassNames(
       styles
@@ -60,7 +60,7 @@ export class Icon extends React.Component<IIconProps, IIconState> {
       );
       let { imageLoadError } = this.state;
       let imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange }
-      let ImageType = imageLoadError && errorAs || Image;
+      let ImageType = imageLoadError && imageErrorAs || Image;
       return (
         <div
           {...containerProps}
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
index 0b51d779b143c0..5e571cbbff9545 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
@@ -70,5 +70,5 @@ export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * If rendering an image icon, this function callback will be invoked in the event loading the image errors.
    */
-  errorAs?: (image: IImageProps) => any;
+  imageErrorAs?: (image: IImageProps) => any;
 }
\ No newline at end of file

From 583e8841720ffd81b1a1bff11518fa12b5d81920 Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Fri, 16 Feb 2018 14:54:46 -0800
Subject: [PATCH 3/7] add change file

---
 .../staylo-AddErrorAsToIcon_2018-02-16-22-54.json     | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/staylo-AddErrorAsToIcon_2018-02-16-22-54.json

diff --git a/common/changes/office-ui-fabric-react/staylo-AddErrorAsToIcon_2018-02-16-22-54.json b/common/changes/office-ui-fabric-react/staylo-AddErrorAsToIcon_2018-02-16-22-54.json
new file mode 100644
index 00000000000000..e86b4124bafa32
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/staylo-AddErrorAsToIcon_2018-02-16-22-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add imageErrorAs to IIconProps",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "staylo@microsoft.com"
+}
\ No newline at end of file

From 37ec03652914050c7be129b5d64bf27f1eaa9ff7 Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Tue, 20 Feb 2018 10:39:14 -0800
Subject: [PATCH 4/7] Fix Build Errors

---
 .../__snapshots__/ActivityItem.test.tsx.snap  |  2 --
 .../__snapshots__/Breadcrumb.test.tsx.snap    |  8 ------
 .../src/components/Button/BaseButton.tsx      | 10 ++++---
 .../Button/__snapshots__/Button.test.tsx.snap |  3 --
 .../__snapshots__/Calendar.test.tsx.snap      |  4 ---
 .../__snapshots__/Checkbox.test.tsx.snap      |  1 -
 .../__snapshots__/ComboBox.test.tsx.snap      |  1 -
 .../__snapshots__/CommandBar.test.tsx.snap    |  1 -
 .../__snapshots__/DatePicker.test.tsx.snap    |  1 -
 .../__snapshots__/DocumentCard.test.tsx.snap  |  1 -
 .../__snapshots__/Dropdown.test.tsx.snap      |  2 --
 .../src/components/Icon/Icon.tsx              | 28 +++++++++----------
 .../Icon/__snapshots__/Icon.test.tsx.snap     |  1 -
 .../__snapshots__/MessageBar.test.tsx.snap    |  1 -
 .../Nav/__snapshots__/Nav.test.tsx.snap       |  2 +-
 .../Rating/__snapshots__/Rating.test.tsx.snap | 10 -------
 .../__snapshots__/SearchBox.test.tsx.snap     |  1 -
 .../__snapshots__/SpinButton.test.tsx.snap    |  2 --
 18 files changed, 21 insertions(+), 58 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
index b3acb36fff522c..e861f560710775 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
@@ -173,7 +173,6 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
 
           {
@@ -594,7 +593,6 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
 
           {
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 30ff42150359c8..9ea260d7df8d62 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -44,7 +44,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -73,7 +72,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -102,7 +100,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -131,7 +128,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -253,7 +249,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
               >
                 <i
                   aria-hidden={true}
-                  aria-label={undefined}
                   className=
                       ms-Button-icon
                       {
@@ -278,7 +273,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </button>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -307,7 +301,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -336,7 +329,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 6f854abb1e3858..38d2df6cb8aed3 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -254,10 +254,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
        } = this.props;
 
     if (iconProps) {
-      return <Icon
-        {...iconProps}
-        className={ this._classNames.icon }
-      />
+      return (
+        <Icon
+          {...iconProps}
+          className={ this._classNames.icon }
+        />
+      );
     }
     return null;
   }
diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 0fbc1378c8cfc1..c2803b1370a6ba 100644
--- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -180,7 +180,6 @@ exports[`Button renders CommandBarButton correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-icon
           {
@@ -227,7 +226,6 @@ exports[`Button renders CommandBarButton correctly 1`] = `
     </div>
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-menuIcon
           {
@@ -553,7 +551,6 @@ exports[`Button renders IconButton correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-icon
           {
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index 9bd37fc04426ca..507065a96d6f5d 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -39,7 +39,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -60,7 +59,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -916,7 +914,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -936,7 +933,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index a40e7894da1edf..435c38cb47e4b9 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -104,7 +104,6 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
 
             {
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index 410413b8d27910..3230dce46f29d6 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -243,7 +243,6 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-Button-icon
               {
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index 1d75d3b33a5d1a..89282c08b05c9f 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -40,7 +40,6 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
           </span>
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-CommandBarItem-chevronDown
                 {
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index 213d16b79fbc47..9f3ccff2170c43 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -38,7 +38,6 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
           />
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-DatePicker-event--without-label
                 {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
index a60ae4c7ac5c29..d68c9fef762664 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
@@ -48,7 +48,6 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = `
             >
               <i
                 aria-hidden={true}
-                aria-label={undefined}
                 className=
 
                     {
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 89eb9f638d7c57..219f16707a7dd2 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`Dropdown multi-select Renders multiselect Dropdown correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
             ms-Dropdown-caretDown
             {
@@ -84,7 +83,6 @@ exports[`Dropdown single-select Renders single-select Dropdown correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
             ms-Dropdown-caretDown
             {
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index 20f97bd67e01e8..6a9cf16a9ca3a3 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -21,19 +21,10 @@ export class Icon extends React.Component<IIconProps, IIconState> {
     super(props);
     this.state = {
       imageLoadError: false,
-    }
-  }
-
-  private onImageLoadingStateChange = (state: ImageLoadState): void => {
-    if (this.props.imageProps && this.props.imageProps.onLoadingStateChange) {
-      this.props.imageProps.onLoadingStateChange(state);
-    }
-    if (state == ImageLoadState.error) {
-      this.setState({ imageLoadError: true });
-    }
+    };
   }
 
-  render() {
+  public render() {
     let {
     ariaLabel,
       className,
@@ -49,7 +40,7 @@ export class Icon extends React.Component<IIconProps, IIconState> {
       role: 'presentation',
       'aria-hidden': true,
       'data-icon-name': iconName,
-    }
+    };
 
     if (this.props.iconType === IconType.image || this.props.iconType === IconType.Image) {
       let containerClassName = css(
@@ -59,7 +50,7 @@ export class Icon extends React.Component<IIconProps, IIconState> {
         className
       );
       let { imageLoadError } = this.state;
-      let imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange }
+      let imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange };
       let ImageType = imageLoadError && imageErrorAs || Image;
       return (
         <div
@@ -110,4 +101,13 @@ export class Icon extends React.Component<IIconProps, IIconState> {
       );
     }
   }
-};
+
+  private onImageLoadingStateChange = (state: ImageLoadState): void => {
+    if (this.props.imageProps && this.props.imageProps.onLoadingStateChange) {
+      this.props.imageProps.onLoadingStateChange(state);
+    }
+    if (state === ImageLoadState.error) {
+      this.setState({ imageLoadError: true });
+    }
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index 3b1bc246f97218..ab530ac055dbe0 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Icon renders Icon correctly 1`] = `
 <i
   aria-hidden={true}
-  aria-label={undefined}
   className=
 
       {
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
index 582e808dec4c90..c7ffb8da96dab5 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -14,7 +14,6 @@ exports[`MessageBar renders MessageBar correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
 
             {
diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
index 25e12db86478e2..fca32f1e4c7be7 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -122,7 +122,6 @@ exports[`Nav renders Nav correctly 1`] = `
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
                         ms-Icon-placeHolder
                         ms-Button-icon
@@ -142,6 +141,7 @@ exports[`Nav renders Nav correctly 1`] = `
                           text-align: center;
                           vertical-align: middle;
                         }
+                    data-icon-name=""
                     role="presentation"
                   />
                   <div
diff --git a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
index fc292a8d5840e4..2fe0fac83b0b04 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
@@ -105,7 +105,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -120,7 +119,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -229,7 +227,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -244,7 +241,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -353,7 +349,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -368,7 +363,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -477,7 +471,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -492,7 +485,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -601,7 +593,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -616,7 +607,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index 92af36c12bd500..ca2d164525dc7f 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -56,7 +56,6 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-SearchBox-icon
           {
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
index 928e00cac02cf4..e95ce36c7186a3 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -227,7 +227,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         >
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-Button-icon
                 {
@@ -333,7 +332,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         >
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-Button-icon
                 {

From d9494f375c44a891a420e3247f49ee1aca5f443b Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Tue, 20 Feb 2018 11:48:50 -0800
Subject: [PATCH 5/7] Fix build errors

---
 packages/office-ui-fabric-react/src/components/Icon/Icon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index eca8e2b6e3493b..9cffb032aaa6ba 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -50,8 +50,8 @@ export class Icon extends React.Component<IIconProps, IIconState> {
         className
       );
       const { imageLoadError } = this.state;
-      let imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange };
-      let ImageType = imageLoadError && imageErrorAs || Image;
+      const imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange };
+      const ImageType = imageLoadError && imageErrorAs || Image;
       return (
         <div
           {...containerProps}

From 3c09df321e2505b9ad632c8c29299970ed0c32a2 Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Tue, 20 Feb 2018 14:34:02 -0800
Subject: [PATCH 6/7] fix bundle error WITH PERMISSION. And extend base
 component and props

---
 packages/office-ui-fabric-react/src/components/Icon/Icon.tsx | 5 +++--
 .../office-ui-fabric-react/src/components/Icon/Icon.types.ts | 3 ++-
 scripts/package.json                                         | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index 9cffb032aaa6ba..c85f56289bd8f0 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -7,7 +7,8 @@ import { ImageLoadState } from '../Image/Image.types';
 import {
   css,
   getNativeProps,
-  htmlElementProperties
+  htmlElementProperties,
+  BaseComponent
 } from '../../Utilities';
 import { getIcon, IIconRecord } from '../../Styling';
 import { getClassNames } from './Icon.classNames';
@@ -16,7 +17,7 @@ export interface IIconState {
   imageLoadError: boolean;
 }
 
-export class Icon extends React.Component<IIconProps, IIconState> {
+export class Icon extends BaseComponent<IIconProps, IIconState> {
   constructor(props: IIconProps) {
     super(props);
     this.state = {
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
index 5e571cbbff9545..92b63affea2cc1 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IImageProps } from '../Image/Image.types';
 import { IStyle } from '../../Styling';
 import { Icon } from './Icon';
+import { IBaseProps } from '../../Utilities';
 
 // Please keep alphabetized
 export enum IconType {
@@ -35,7 +36,7 @@ export interface IIconStyles {
   imageContainer?: IStyle;
 }
 
-export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
+export interface IIconProps extends IBaseProps, React.HTMLAttributes<HTMLElement> {
   /**
    * The name of the icon to use from the icon font. If string is empty, a placeholder icon will be rendered the same width as an icon
    */
diff --git a/scripts/package.json b/scripts/package.json
index 8ee991768cd7a4..79442affc8b343 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/main.min.js",
-      "maxSize": "43.1 kB"
+      "maxSize": "43.2 kB"
     }
   ]
 }
\ No newline at end of file

From dee7769132853e4d1cc33b3172cc696d2a1dea4d Mon Sep 17 00:00:00 2001
From: Stauffer Taylor <staylo@microsoft.com>
Date: Wed, 21 Feb 2018 15:23:12 -0800
Subject: [PATCH 7/7] Make imageErrorAs type safe

---
 .../office-ui-fabric-react/src/components/Icon/Icon.types.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
index 92b63affea2cc1..378e791046a087 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
@@ -71,5 +71,5 @@ export interface IIconProps extends IBaseProps, React.HTMLAttributes<HTMLElement
   /**
    * If rendering an image icon, this function callback will be invoked in the event loading the image errors.
    */
-  imageErrorAs?: (image: IImageProps) => any;
+  imageErrorAs?: React.StatelessComponent<IImageProps> | React.ComponentClass<IImageProps>;
 }
\ No newline at end of file