Fix for #76

pnp · May 16, 2018 · 0069f8f · 0069f8f
1 parent 824dc6f
commit 0069f8f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 - `SecurityTrimmedControl` control got added [#74](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/74)
 
+**Fixes**
+
+- Icon not showing up in the `Placeholder` control [#76](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/76)
+
 ## 1.3.0
 
 **New Controls**

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -6,6 +6,10 @@
 
 - `SecurityTrimmedControl` control got added [#74](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/74)
 
+**Fixes**
+
+- Icon not showing up in the `Placeholder` control [#76](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/76)
+
 ## 1.3.0
 
 **New Controls**

diff --git a/src/controls/placeholder/PlaceholderComponent.tsx b/src/controls/placeholder/PlaceholderComponent.tsx
@@ -4,6 +4,7 @@ import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import styles from './PlaceholderComponent.module.scss';
 import * as appInsights from '../../common/appInsights';
 import { IPlaceholderState } from '.';
+import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
 
 /**
  * Placeholder component
@@ -83,15 +84,13 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
    * Default React component render method
    */
   public render(): React.ReactElement<IPlaceholderProps> {
-    const iconName = typeof this.props.iconName !== 'undefined' && this.props.iconName !== null ? `ms-Icon--${this.props.iconName}` : '';
-
     return (
       <div className={`${styles.placeholder} ${this.props.contentClassName ? this.props.contentClassName : ''}`} ref={this._linkElm}>
         <div className={styles.placeholderContainer}>
           <div className={styles.placeholderHead}>
             <div className={styles.placeholderHeadContainer}>
               {
-                iconName ? <i className={`${styles.placeholderIcon} ms-fontSize-su ms-Icon ${iconName}`}></i> : ''
+                this.props.iconName && <Icon iconName={this.props.iconName} className={`${styles.placeholderIcon} ms-fontSize-su ms-Icon`} />
               }
               <span className={`${styles.placeholderText} ms-fontWeight-light ms-fontSize-xxl ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`}>{this.props.iconText}</span>
             </div>