diff --git a/.travis.yml b/.travis.yml
index c7e68442a0a2b8..b8208214c949e3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,7 +3,7 @@ node_js:
 - '4.2'
 before_script:
 - npm install -g gulp
-script: gulp
+script: gulp --production
 deploy:
   provider: npm
   email: dzearing@microsoft.com
diff --git a/package.json b/package.json
index b1c237dda6fc95..f08adfe41df54b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss
index a1abf188b5915b..57810b22b078a4 100644
--- a/src/components/Breadcrumb/Breadcrumb.scss
+++ b/src/components/Breadcrumb/Breadcrumb.scss
@@ -131,4 +131,3 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     }
   }
 }
-
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 7d5a670178c3d8..2bdb6ea0137b20 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -286,25 +286,47 @@
 // TODO: Overrides that need to be removed.
 
 .ms-Button--icon {
+  @include focus-border(0px);
   background-color: transparent;
+  color: $ms-color-neutralSecondary;
   padding: 0;
   min-width: auto;
   height: auto;
   border: 0;
 
-  &:hover {
+  &:hover,
+  &:active {
     background-color: transparent;
     border-color: transparent;
     outline-color: transparent;
+    color: $ms-color-neutralPrimary;
   }
 
   &:focus {
     background-color: transparent;
   }
 
+  .ms-Icon {
+    font-size: 16px;
+    padding: 8px;
+  }
+
   .ms-Button-icon {
     display: inline;
   }
+
+  &.is-disabled, &:disabled {
+    color: $ms-color-neutralTertiaryAlt;
+    background-color: transparent;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    color: $ms-color-yellowLight;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $ms-color-blueMid;
+  }
 }
 
 // this is added because we have an anchor styled like a button and there is no
diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx
index 455fa20f468031..01d0127e96b8ea 100644
--- a/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -119,7 +119,7 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
         {
           option.imageSrc
             ? <div className='ms-ChoiceField-labelWrapper'>
-                <i className='ms-ChoiceField-icon ms-Icon ms-Icon--check' />
+                <i className='ms-ChoiceField-icon ms-Icon ms-Icon--CheckMark' />
                 <span id={ `${this._descriptionId}-${option.key}` } className='ms-Label'>{ option.text }</span>
               </div>
             : <span id={ `${this._descriptionId}-${option.key}` } className='ms-Label'>{ option.text }</span>
diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss
index 5ef1a41f855082..7cd487c5c7805c 100644
--- a/src/components/CommandBar/CommandBar.scss
+++ b/src/components/CommandBar/CommandBar.scss
@@ -193,7 +193,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
     }
   }
 
-  .ms-Icon--search {
+  .ms-Icon--Search {
     @include margin-left(2px);
     margin-top: 12px;
     vertical-align: top;
diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx
index c16caca5b174ff..459ed886933520 100644
--- a/src/components/CommandBar/CommandBar.tsx
+++ b/src/components/CommandBar/CommandBar.tsx
@@ -89,10 +89,10 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
         <div className='ms-CommandBarSearch' ref='searchSurface'>
           <input className='ms-CommandBarSearch-input' type='text' placeholder={ searchPlaceholderText } />
           <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper'>
-            <i className='ms-Icon ms-Icon--search'></i>
+            <i className='ms-Icon ms-Icon--Search'></i>
           </div>
           <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s'>
-            <i className='ms-Icon ms-Icon--x'></i>
+            <i className='ms-Icon ms-Icon--Cancel'></i>
           </div>
         </div>
       );
@@ -108,7 +108,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
             )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
             <div className='ms-CommandBarItem' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
               <button id={ this._instanceId + OVERFLOW_KEY } className={ css('ms-CommandBarItem-link', { 'is-expanded': (expandedMenuItemKey === OVERFLOW_KEY) }) } onClick={ this._onOverflowClick } role='menuitem' aria-label={ elipsisScreenReaderText }>
-                <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--ellipsis' />
+                <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--More' />
               </button>
             </div>
             ] : []) }
@@ -153,7 +153,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
                          { (!!item.icon) && <span className={ `ms-CommandBarItem-icon ms-Icon ms-Icon--${ item.icon }` }></span> }
                          { (!!item.name) && <span className='ms-CommandBarItem-commandText'>{ item.name }</span> }
                          { (item.items && item.items.length) ? (
-                           <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown' />
+                           <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown' />
                          ) : ( null ) }
                        </button>;
                } else {
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index 619f3490c26756..635d5b8b96a00b 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -256,7 +256,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         {(hasCheckmarks) ? (
           <span
             className={
-              css('ms-ContextualMenu-checkmark', {'ms-Icon ms-Icon--check': item.isChecked, 'not-selected': !item.isChecked})
+              css('ms-ContextualMenu-checkmark', {'ms-Icon ms-Icon--CheckMark': item.isChecked, 'not-selected': !item.isChecked})
             }
             onClick={ this._onItemClick.bind(this, item) } />
         ) : (null) }
@@ -265,7 +265,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         ) : (null)}
         <span className='ms-ContextualMenu-itemText ms-fontWeight-regular'>{ item.name }</span>
         {(item.items && item.items.length) ? (
-          <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight') } />
+          <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') } />
         ) : (null)}
       </div>
     );
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 8b735fe34b8405..4bee707dbe0c3a 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -125,7 +125,7 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
             label={ label }
             placeholder={ placeholder }
             iconClass={ css(
-              'ms-Icon ms-Icon--event',
+              'ms-Icon ms-Icon--Event',
               label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label'
               ) }
             readOnly={ !allowTextInput }
diff --git a/src/components/DatePicker/DatePickerDay.tsx b/src/components/DatePicker/DatePickerDay.tsx
index 36bdb9fece87dc..d1710fa3424ff3 100644
--- a/src/components/DatePicker/DatePickerDay.tsx
+++ b/src/components/DatePicker/DatePickerDay.tsx
@@ -77,14 +77,14 @@ export class DatePickerDay extends React.Component<IDatePickerDayProps, IDatePic
               onClick={ this._onSelectPrevMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevMonth) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': !getRTL(), 'ms-Icon--chevronRight': getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL()}) }  />
             </span>
             <span
               className='ms-DatePicker-nextMonth js-nextMonth'
               onClick={ this._onSelectNextMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextMonth) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': getRTL(), 'ms-Icon--chevronRight': !getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL()}) }  />
             </span>
           </div>
           <div className='ms-DatePicker-headerToggleView js-showMonthPicker'></div>
diff --git a/src/components/DatePicker/DatePickerMonth.tsx b/src/components/DatePicker/DatePickerMonth.tsx
index 76198f0ab6a62b..4a09fe7e778483 100644
--- a/src/components/DatePicker/DatePickerMonth.tsx
+++ b/src/components/DatePicker/DatePickerMonth.tsx
@@ -41,14 +41,14 @@ export class DatePickerMonth extends React.Component<IDatePickerMonthProps, {}>
               onClick={ this._onSelectPrevYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevYear) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': !getRTL(), 'ms-Icon--chevronRight': getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL()}) }  />
             </span>
             <span
               className='ms-DatePicker-nextYear js-nextYear'
               onClick={ this._onSelectNextYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextYear) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': getRTL(), 'ms-Icon--chevronRight': !getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL()}) }  />
             </span>
           </div>
           <div className='ms-DatePicker-currentYear js-showYearPicker'>{ navigatedDate.getFullYear() }</div>
diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx
index 509c3ce4edcc9f..151dc3a30ca0be 100644
--- a/src/components/DetailsList/DetailsHeader.tsx
+++ b/src/components/DetailsList/DetailsHeader.tsx
@@ -119,7 +119,7 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
           ) : (null) }
           { groupNestingDepth > 0 ? (
           <button className='ms-DetailsHeader-cell' onClick={ this._onToggleCollapseAll }>
-            <i className={ css('ms-DetailsHeader-collapseButton ms-Icon ms-Icon--chevronDown', {
+            <i className={ css('ms-DetailsHeader-collapseButton ms-Icon ms-Icon--ChevronDown', {
               'is-collapsed': isAllCollapsed
             }) } >
             </i>
@@ -152,13 +152,13 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
 
                   { column.isSorted && (
                     <i className={ css('ms-Icon', {
-                      'ms-Icon--arrowUp2': !column.isSortedDescending,
-                      'ms-Icon--arrowDown2': column.isSortedDescending
+                      'ms-Icon--Up': !column.isSortedDescending,
+                      'ms-Icon--Down': column.isSortedDescending
                     }) } />
                   ) }
 
                   { column.isFiltered && (
-                    <i className='ms-Icon ms-Icon--filter' />
+                    <i className='ms-Icon ms-Icon--Filter' />
                   ) }
 
                   { column.iconClassName && (
@@ -168,7 +168,7 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
                   { column.name }
 
                   { column.columnActionsMode === ColumnActionsMode.hasDropdown && (
-                    <i className='ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown' />
+                    <i className='ms-DetailsHeader-filterChevron ms-Icon ms-Icon--ChevronDown' />
                   ) }
                 </button>
               </div>
diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx
index f94fafafa5f690..3a3664d262d767 100644
--- a/src/components/DetailsList/DetailsList.tsx
+++ b/src/components/DetailsList/DetailsList.tsx
@@ -11,7 +11,8 @@ import {
 import { DetailsHeader } from '../DetailsList/DetailsHeader';
 import { DetailsRow } from '../DetailsList/DetailsRow';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { GroupedList } from '../GroupedList';
+import { GroupedList } from '../../GroupedList';
+import { List } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { assign } from '../../utilities/object';
 import { css } from '../../utilities/css';
@@ -61,6 +62,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
     header: DetailsHeader,
     root: HTMLElement,
     groups: GroupedList,
+    list: List,
     focusZone: FocusZone
   };
 
@@ -120,7 +122,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       items,
       setKey,
       selectionMode,
-      columns
+      columns,
+      viewport
     } = this.props;
     let { layoutMode } = this.state;
     let shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
@@ -136,7 +139,10 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       this._selection.setItems(newProps.items, shouldResetSelection);
     }
 
-    if (newProps.columns !== columns) {
+    if (
+      newProps.columns !== columns ||
+      newProps.viewport.width !== viewport.width
+    ) {
       shouldForceUpdates = true;
     }
 
@@ -182,6 +188,10 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       _dragDropHelper: dragDropHelper
     } = this;
     let groupNestingDepth = this._getGroupNestingDepth();
+    let additionalListProps = {
+      renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
+      renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND
+    };
 
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
@@ -228,22 +238,29 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
               selection={ selection }
               selectionMode={ selectionMode }
               onItemInvoked={ onItemInvoked }>
-              <GroupedList
-                groups={ groups }
-                groupProps={ groupProps }
-                items={ items }
-                onRenderCell={ this._onRenderCell }
-                selection={ selection }
-                selectionMode={ selectionMode }
-                dragDropEvents={ dragDropEvents }
-                dragDropHelper={ dragDropHelper }
-                eventsToRegister={ rowElementEventMap }
-                listProps={ {
-                  renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
-                  renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND
-                } }
-                ref='groups'
-                />
+              { groups ? (
+                  <GroupedList
+                    groups={ groups }
+                    groupProps={ groupProps }
+                    items={ items }
+                    onRenderCell={ this._onRenderCell }
+                    selection={ selection }
+                    selectionMode={ selectionMode }
+                    dragDropEvents={ dragDropEvents }
+                    dragDropHelper={ dragDropHelper }
+                    eventsToRegister={ rowElementEventMap }
+                    listProps={ additionalListProps }
+                    ref='groups'
+                    />
+                ) : (
+                  <List
+                    items={ items }
+                    onRenderCell={ (item, itemIndex) => this._onRenderCell(0, item, itemIndex) }
+                    { ...additionalListProps }
+                    ref='list'
+                    />
+                )
+              }
             </SelectionZone>
           </FocusZone>
         </div>
@@ -261,8 +278,6 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       dragDropEvents,
       rowElementEventMap: eventsToRegister,
       onRenderMissingItem,
-      onRowDidMount,
-      onRowWillUnmount,
       onRenderItemColumn,
       selectionMode,
       viewport,
@@ -293,8 +308,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
           groupNestingDepth={ nestingDepth }
           selectionMode={ selectionMode }
           selection={ selection }
-          onDidMount={ onRowDidMount }
-          onWillUnmount={ onRowWillUnmount }
+          onDidMount={ this._onRowDidMount }
+          onWillUnmount={ this._onRowWillUnmount }
           onRenderItemColumn={ onRenderItemColumn }
           eventsToRegister={ eventsToRegister }
           dragDropEvents={ dragDropEvents }
@@ -373,7 +388,12 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
   }
 
   private _forceListUpdates() {
-    this.refs.groups.forceUpdate();
+    if (this.refs.groups) {
+      this.refs.groups.forceUpdate();
+    }
+    if (this.refs.list) {
+      this.refs.list.forceUpdate();
+    }
   }
 
   private _adjustColumns(newProps: IDetailsListProps, forceUpdate?: boolean, layoutMode?: DetailsListLayoutMode) {
diff --git a/src/components/DetailsList/DetailsRowFields.tsx b/src/components/DetailsList/DetailsRowFields.tsx
index 79347daa6d3b29..9927641f986a48 100644
--- a/src/components/DetailsList/DetailsRowFields.tsx
+++ b/src/components/DetailsList/DetailsRowFields.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
 import { css } from '../../utilities/css';
-import { shallowCompare } from '../../utilities/object';
 
 export interface IDetailsRowFieldsProps {
   item: any;
@@ -21,10 +20,6 @@ export class DetailsRowFields extends React.Component<IDetailsRowFieldsProps, ID
     this.state = this._getState(props);
   }
 
-  public shouldComponentUpdate(newProps: IDetailsRowFieldsProps) {
-    return !shallowCompare(this.props, newProps);
-  }
-
   public componentWillReceiveProps(newProps: IDetailsRowFieldsProps) {
     this.setState(this._getState(newProps));
   }
diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss
index 0ef9c04940370b..d76c9bb46c238f 100644
--- a/src/components/Dialog/Dialog.scss
+++ b/src/components/Dialog/Dialog.scss
@@ -84,7 +84,7 @@
   top: 12px;
   z-index: $ms-zIndex-front;
 
-  .ms-Icon.ms-Icon--x {
+  .ms-Icon.ms-Icon--Cancel {
     color: $ms-color-neutralSecondary;
     font-size: 16px;
   }
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 923e0f1713c502..d8f6ddca9edb15 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -75,7 +75,7 @@ export class Dialog extends React.Component<IDialogProps, any> {
                 <button className='ms-Dialog-button ms-Dialog-button--close'
                   onClick={ onDismiss }
                   aria-label= { closeButtonAriaLabel }>
-                  <i className='ms-Icon ms-Icon--x'></i>
+                  <i className='ms-Icon ms-Icon--Cancel'></i>
                 </button>
                 <div className='ms-Dialog-header'>
                   <p className='ms-Dialog-title' id={ id + '-title'}>{ title }</p>
diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx
index 7204affcb9be4c..1d31c756215aed 100644
--- a/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/src/components/DocumentCard/DocumentCardActions.tsx
@@ -23,7 +23,7 @@ export class DocumentCardActions extends React.Component<IDocumentCardActionsPro
 
         { views && (
         <div className='ms-DocumentCardActions-views'>
-          <i className='ms-Icon ms-Icon--eye' />
+          <i className='ms-Icon ms-Icon--View' />
           { views }
         </div>
         ) }
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 8e785ed30b0617..fdf8f7f4c5a144 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -100,7 +100,7 @@ export class Dropdown extends React.Component<IDropdownProps, any> {
           aria-activedescendant={ selectedIndex >= 0 ? (id + '-list' + selectedIndex) : (id + '-list') }
           aria-controls={ id + '-list' }
           >
-          <i className='ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown'></i>
+          <i className='ms-Dropdown-caretDown ms-Icon ms-Icon--CaretDownSolid8'></i>
           <span className='ms-Dropdown-title'>{ selectedOption ? selectedOption.text : '' }</span>
           <ul ref={ (c: HTMLElement) => this._optionList = c }
             id={ id + '-list' }
diff --git a/src/components/GroupedList/Group.tsx b/src/components/GroupedList/Group.tsx
index 706d4bc4083a79..2a1ac94af840ed 100644
--- a/src/components/GroupedList/Group.tsx
+++ b/src/components/GroupedList/Group.tsx
@@ -234,17 +234,14 @@ export class Group extends React.Component<IGroupProps, IGroupState> {
     let level = group ? group.level : 0;
 
     return (
-      <div
-        className={ css('ms-GroupedList-group', this._getDroppingClassName()) }>
-        <List
-          items={ items }
-          onRenderCell={ (item, itemIndex) => onRenderCell(level, item, itemIndex) }
-          ref={ 'list' }
-          renderCount={ Math.min(count, renderCount) }
-          startIndex={ startIndex }
-          { ...listProps }
-          />
-      </div>
+      <List
+        items={ items }
+        onRenderCell={ (item, itemIndex) => onRenderCell(level, item, itemIndex) }
+        ref={ 'list' }
+        renderCount={ Math.min(count, renderCount) }
+        startIndex={ startIndex }
+        { ...listProps }
+        />
     );
   }
 
diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx
index c08f3a4e897115..cddcb0f37ef175 100644
--- a/src/components/GroupedList/GroupHeader.tsx
+++ b/src/components/GroupedList/GroupHeader.tsx
@@ -86,7 +86,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
           { GroupSpacer({ count: groupLevel }) }
 
           <button className='ms-GroupHeader-expand' onClick={ this._onToggleCollapse }>
-            <i className={ css('ms-Icon ms-Icon--chevronDown', {
+            <i className={ css('ms-Icon ms-Icon--ChevronDown', {
               'is-collapsed': isCollapsed
             })} />
           </button>
diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss
index c682fa5685f5eb..7ae6b85b55de50 100644
--- a/src/components/MessageBar/MessageBar.scss
+++ b/src/components/MessageBar/MessageBar.scss
@@ -205,6 +205,6 @@ $MessageBar-padding: 8px;
 }
 
 // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit.
-.ms-MessageBar.ms-MessageBar--remove .ms-Icon--x {
+.ms-MessageBar.ms-MessageBar--remove .ms-Icon--Cancel {
   font-size: 13.333px;
 }
\ No newline at end of file
diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx
index cd9a6f5480f985..ced559b5c2aee3 100644
--- a/src/components/MessageBar/MessageBar.tsx
+++ b/src/components/MessageBar/MessageBar.tsx
@@ -17,13 +17,14 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
     isMultiline: true,
   };
 
+  // TODO bug 230228: Success icon not circled.
   private ICON_MAP = {
-    [MessageBarType.info]:    'infoCircle',
-    [MessageBarType.warning]: 'infoCircle',
-    [MessageBarType.error]: 'xCircle',
-    [MessageBarType.remove]: 'circle',
-    [MessageBarType.severeWarning]: 'alert',
-    [MessageBarType.success]: 'checkboxCheck ms-Icon--circle'
+    [MessageBarType.info]:    'Info',
+    [MessageBarType.warning]: 'Info',
+    [MessageBarType.error]: 'ErrorBadge',
+    [MessageBarType.remove]: 'CircleRing',
+    [MessageBarType.severeWarning]: 'IncidentTriangle',
+    [MessageBarType.success]: 'CircleRing'
   };
 
   constructor(props: IMessageBarProps) {
@@ -66,7 +67,7 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
           aria-label= { this.props.dismissButtonAriaLabel }
           className='ms-MessageBar-dismissal ms-Button--icon'
           onClick= { this.props.onDismiss }>
-          <i className='ms-Icon ms-Icon--x'></i>
+          <i className='ms-Icon ms-Icon--Cancel'></i>
         </button>;
     }
     return null;
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
index 2941e036d999bd..1f006cd0b2f74b 100644
--- a/src/components/Nav/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -86,7 +86,7 @@ export class Nav extends React.Component<INavProps, INavState> {
           className='ms-Nav-groupButton'
           onClick={ this._onGroupHeaderClicked.bind(this, groupIndex) }
         >
-          <i className='ms-Nav-groupChevron ms-Icon ms-Icon--chevronDown'></i>
+          <i className='ms-Nav-groupChevron ms-Icon ms-Icon--ChevronDown'></i>
           { group.name }
         </button> : null)
         }
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index c57818aeedf0a8..cd7d718992c4ca 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -80,7 +80,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
     let closeButton;
     if (hasCloseButton) {
       closeButton = <button className='ms-Panel-closeButton ms-PanelAction-close' onClick={ this._onPanelClick }  aria-label={ closeButtonAriaLabel } data-is-visible={ true }>
-        <i className='ms-Panel-closeIcon ms-Icon ms-Icon--x'></i>
+        <i className='ms-Panel-closeIcon ms-Icon ms-Icon--Cancel'></i>
       </button>;
     }
 
diff --git a/src/components/PeoplePicker/PeoplePicker.tsx b/src/components/PeoplePicker/PeoplePicker.tsx
index 27c0b7c2bd6fc2..a9e13f6ba80c49 100644
--- a/src/components/PeoplePicker/PeoplePicker.tsx
+++ b/src/components/PeoplePicker/PeoplePicker.tsx
@@ -506,7 +506,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
                   <button className='ms-PeoplePicker-resultAction' onClick={ () => {
                       this._removeSelectedPersona( selectedPersonas.indexOf(child) );
                   }}>
-                    <i className='ms-Icon ms-Icon--x'></i>
+                    <i className='ms-Icon ms-Icon--Cancel'></i>
                   </button>
                 </li>);
             })
@@ -536,7 +536,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
             <button className='ms-PeoplePicker-personaRemove' tabIndex={-1} data-is-focusable={false} onClick={ () => {
                 this._removeSelectedPersona( selectedPersonas.indexOf(child) );
               } }>
-              <i className='ms-Icon ms-Icon--x'></i>
+              <i className='ms-Icon ms-Icon--Cancel'></i>
             </button>
           </div>
         </div>);
@@ -603,8 +603,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
       'ms-PeoplePicker-searchMoreBtn--compact': type === PeoplePickerType.compact
     });
     let searchIconClassName = css('ms-Icon', {
-      'ms-Icon--search': isConnected,
-      'ms-Icon--alert': !isConnected
+      'ms-Icon--Search': isConnected,
+      'ms-Icon--IncidentTriangle': !isConnected
     });
     let searchMore = canSearchMore ? (
       <div className={ searchMoreClassName } onClick={ isConnected ? this._searchForMoreResults : null }>
@@ -696,7 +696,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
               className='ms-PeoplePicker-resultAction'
               tabIndex={-1}
               onClick={ () => { this._removeSuggestedPersona(id, personaInfo); }} >
-              <i className='ms-Icon ms-Icon--x'></i></button>
+              <i className='ms-Icon ms-Icon--Cancel'></i></button>
             : null }
         </div>
       </li>);
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index ad63f08bdb89fa..0b1b32bdc52a36 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -52,9 +52,9 @@ export class SearchBox extends React.Component<ISearchBoxProps, ISearchBoxState>
           'is-active': hasFocus
         })}
       >
-        { !hasFocus && !value ? <label className='ms-SearchBox-label' htmlFor={id}><i className='ms-SearchBox-icon ms-Icon ms-Icon--search'></i>{ labelText }</label> : null }
+        { !hasFocus && !value ? <label className='ms-SearchBox-label' htmlFor={id}><i className='ms-SearchBox-icon ms-Icon ms-Icon--Search'></i>{ labelText }</label> : null }
         <input id={id} className='ms-SearchBox-field' onFocus={ this._onInputFocus } onBlur={ this._onInputBlur } onChange={ this._onInputChanged } value={value} ref='inputText' />
-        <button className='ms-SearchBox-closeButton' onMouseDown={ this._clearInput }><i className='ms-Icon ms-Icon--x'></i></button>
+        <button className='ms-SearchBox-closeButton' onMouseDown={ this._clearInput }><i className='ms-Icon ms-Icon--Cancel'></i></button>
       </div>
     );
   }
diff --git a/src/demo/components/App/AppState.ts b/src/demo/components/App/AppState.ts
index 207a6063b1c820..7511cd84768957 100644
--- a/src/demo/components/App/AppState.ts
+++ b/src/demo/components/App/AppState.ts
@@ -62,7 +62,7 @@ export const AppState: IAppState = {
         {
           component: BreadcrumbPage,
           name: 'Breadcrumb',
-          status: ExampleStatus.alpha,
+          status: ExampleStatus.beta,
           url: '#/examples/breadcrumb'
         },
         {
@@ -230,7 +230,7 @@ export const AppState: IAppState = {
         {
           component: TogglePage,
           name: 'Toggle',
-          status: ExampleStatus.alpha,
+          status: ExampleStatus.beta,
           url: '#/examples/toggle'
         }
       ],
diff --git a/src/demo/components/Header/Header.tsx b/src/demo/components/Header/Header.tsx
index 5de3c4c93197e2..9a74cf8a1c6231 100644
--- a/src/demo/components/Header/Header.tsx
+++ b/src/demo/components/Header/Header.tsx
@@ -58,11 +58,11 @@ export class Header extends React.Component<IHeaderProps, IHeaderState> {
         <div className='Header'>
           { (responsiveMode <= ResponsiveMode.large) && (
             <button className='Header-button' onClick={ this._onMenuClick }>
-              <i className='ms-Icon ms-Icon--menu'/>
+              <i className='ms-Icon ms-Icon--GlobalNavButton'/>
             </button>
           ) }
           <div className='Header-title ms-font-xl ms-fontColor-white'>
-            <i className='ms-Icon ms-Icon--classroom' />
+            <i className='ms-Icon ms-Icon--Org' />
             { title }
           </div>
           <div className='Header-buttons'>
@@ -71,7 +71,7 @@ export class Header extends React.Component<IHeaderProps, IHeaderState> {
                 <a key={ linkIndex } className='Header-button ms-fontColor-white' href={ link.url }>{ link.name }</a>
               )).concat([
                 <button key='headerButton' className='Header-button' onClick={ this._onGearClick }>
-                  <i className='ms-Icon ms-Icon--gear'/>
+                  <i className='ms-Icon ms-Icon--Settings'/>
                 </button>
               ]) }
             </FocusZone>
diff --git a/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts b/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts
index d8047337e81610..d7946a449cada6 100644
--- a/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts
+++ b/src/demo/pages/CommandBarPage/examples/data-nonFocusable.ts
@@ -2,25 +2,25 @@ export const itemsNonFocusable = [
   {
     key: 'newItem',
     name: 'New',
-    icon: 'circlePlus',
+    icon: 'CirclePlus',
     onClick: () => { return; },
     items: [
       {
         key: 'emailMessage',
         name: 'Email message',
-        icon: 'mail'
+        icon: 'Mail'
       },
       {
         key: 'calendarEvent',
         name: 'Calendar event',
-        icon: 'calendar'
+        icon: 'Calendar'
       }
     ]
   },
   {
     key: 'upload',
     name: 'Upload',
-    icon: 'upload',
+    icon: 'Upload',
     onClick: () => { return; }
   }
 ];
@@ -29,12 +29,12 @@ export const farItemsNonFocusable = [
   {
     key: 'saveStatus',
     name: 'Your page has been saved',
-    icon: 'check'
+    icon: 'CheckMark'
   },
   {
     key: 'publish',
     name: 'Publish',
-    icon: 'story',
+    icon: 'ReadingMode',
     onClick: () => { return; }
   }
 ];
\ No newline at end of file
diff --git a/src/demo/pages/CommandBarPage/examples/data.ts b/src/demo/pages/CommandBarPage/examples/data.ts
index 8c6cb3371ddd83..df6b28b3817e98 100644
--- a/src/demo/pages/CommandBarPage/examples/data.ts
+++ b/src/demo/pages/CommandBarPage/examples/data.ts
@@ -2,55 +2,55 @@ export const items = [
   {
     key: 'newItem',
     name: 'New',
-    icon: 'circlePlus',
+    icon: 'CirclePlus',
     onClick: () => { return; },
     items: [
       {
         key: 'emailMessage',
         name: 'Email message',
-        icon: 'mail'
+        icon: 'Mail'
       },
       {
         key: 'calendarEvent',
         name: 'Calendar event',
-        icon: 'calendar'
+        icon: 'Calendar'
       }
     ]
   },
   {
     key: 'upload',
     name: 'Upload',
-    icon: 'upload',
+    icon: 'Upload',
     onClick: () => { return; }
   },
   {
     key: 'share',
     name: 'Share',
-    icon: 'share',
+    icon: 'Share',
     onClick: () => { return; }
   },
   {
     key: 'download',
     name: 'Download',
-    icon: 'download',
+    icon: 'Download',
     onClick: () => { return; }
   },
   {
     key: 'move',
     name: 'Move to...',
-    icon: 'folderMove',
+    icon: 'MoveToFolder',
     onClick: () => { return; }
   },
   {
     key: 'copy',
     name: 'Copy to...',
-    icon: 'copy',
+    icon: 'Copy',
     onClick: () => { return; }
   },
   {
     key: 'rename',
     name: 'Rename...',
-    icon: 'editBox',
+    icon: 'Edit',
     onClick: () => { return; }
   }
 ];
@@ -92,37 +92,37 @@ export const iconOnlyItems = [
   {
     key: 'upload',
     name: '',
-    icon: 'upload',
+    icon: 'Upload',
     onClick: () => { return; }
   },
   {
     key: 'share',
     name: '',
-    icon: 'share',
+    icon: 'Share',
     onClick: () => { return; }
   },
   {
     key: 'download',
     name: '',
-    icon: 'download',
+    icon: 'Download',
     onClick: () => { return; }
   },
   {
     key: 'move',
     name: '',
-    icon: 'folderMove',
+    icon: 'MoveToFolder',
     onClick: () => { return; }
   },
   {
     key: 'copy',
     name: '',
-    icon: 'copy',
+    icon: 'Copy',
     onClick: () => { return; }
   },
   {
     key: 'rename',
     name: '',
-    icon: 'editBox',
+    icon: 'Edit',
     onClick: () => { return; }
   }
 ];
@@ -131,17 +131,17 @@ export const overflowItems = [
   {
     key: 'move',
     name: 'Move to...',
-    icon: 'folderMove'
+    icon: 'MoveToFolder'
   },
   {
     key: 'copy',
     name: 'Copy to...',
-    icon: 'copy'
+    icon: 'Copy'
   },
   {
     key: 'rename',
     name: 'Rename...',
-    icon: 'editBox'
+    icon: 'Edit'
   }
 
 ];
diff --git a/src/utilities/decorators/withViewport.tsx b/src/utilities/decorators/withViewport.tsx
index 8904a6c107da05..894478b42eba40 100644
--- a/src/utilities/decorators/withViewport.tsx
+++ b/src/utilities/decorators/withViewport.tsx
@@ -50,37 +50,50 @@ export function withViewport<P, S>(ComposedComponent: any): any {
 
     public render() {
       let { viewport } = this.state;
+      let isViewportVisible = viewport.width > 0 && viewport.height > 0;
 
       return (
         <div className='ms-Viewport' ref='root' style={ { minWidth: 1, minHeight: 1 } }>
-          { this.state.viewport.height > 0 && (
-          <ComposedComponent ref='component' viewport={ viewport } { ...this.props } />
-          )}
+          { isViewportVisible && (
+            <ComposedComponent ref='component' viewport={ viewport } { ...this.props } />
+          ) }
         </div>
       );
     }
 
     public forceUpdate() {
-      this.refs.component.forceUpdate();
+      this._updateViewport(true);
     }
 
     private _onAsyncResize() {
       this._updateViewport();
     }
 
-    private _updateViewport() {
+    private _updateViewport(withForceUpdate?: boolean) {
+      let { viewport } = this.state;
       let viewportElement = (this.refs as any).root;
       let scrollElement = this._findScrollableElement(viewportElement);
-
       let clientRect = viewportElement.getBoundingClientRect();
       let scrollRect = scrollElement.getBoundingClientRect();
-
-      this.setState({
-        viewport: {
-          width: clientRect.width,
-          height: scrollRect.height
-        }
-      });
+      let updateComponent = () => {
+          if (withForceUpdate && this.refs.component) {
+            this.refs.component.forceUpdate();
+          }
+      };
+      let isSizeChanged = (
+        clientRect.width !== viewport.width ||
+        scrollRect.height !== viewport.height);
+
+      if (isSizeChanged) {
+        this.setState({
+          viewport: {
+            width: clientRect.width,
+            height: scrollRect.height
+          }
+        }, updateComponent);
+      } else {
+        updateComponent();
+      }
     }
 
     private _findScrollableElement(rootElement: HTMLElement) {