Pass icons into Button instead of using strings

UNRELEASED.md

@@ -35,5 +35,6 @@ Upgraded Storybook to v5 ([#1140](https://github.com/Shopify/polaris-react/pull/
 - Updated `ResourceList` to no longer use `componentWillReceiveProps`([#1235](https://github.com/Shopify/polaris-react/pull/1235))
 - Updated `Tabs` to no longer use `componentWillReceiveProps`([#1221](https://github.com/Shopify/polaris-react/pull/1221))
 - Removed an unneeded media query from Modal's `Header` component ([#1272](https://github.com/Shopify/polaris-react/pull/1272))
+- Replaces all instances where we pass a string representing a bundled icon into `Button`. Prefer passing in the React Component from `@shopify/polaris-icons` ([#1297](https://github.com/Shopify/polaris-react/pull/1297))
 
 ### Deprecations

src/components/Banner/Banner.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {classNames, variationName} from '@shopify/react-utilities/styles';
 import {
+  CancelSmallMinor,
   CircleTickMajorTwotone,
   FlagMajorTwotone,
   CircleAlertMajorTwotone,
@@ -147,7 +148,7 @@ export default class Banner extends React.PureComponent<Props, never> {
       <div className={styles.Dismiss}>
         <Button
           plain
-          icon="cancelSmall"
+          icon={CancelSmallMinor}
           onClick={onDismiss}
           accessibilityLabel="Dismiss notification"
         />

src/components/CalloutCard/CalloutCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import {CancelSmallMinor} from '@shopify/polaris-icons';
 import {classNames} from '@shopify/react-utilities';
 
 import {Action} from '../../types';
@@ -53,7 +53,7 @@ export default function CalloutCard({
     <div className={styles.Dismiss}>
       <Button
         plain
-        icon="cancelSmall"
+        icon={CancelSmallMinor}
         onClick={onDismiss}
         accessibilityLabel="Dismiss card"
       />

src/components/DataTable/components/Navigation/Navigation.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {ChevronLeftMinor, ChevronRightMinor} from '@shopify/polaris-icons';
 import {classNames} from '@shopify/react-utilities/styles';
 
 import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
@@ -49,15 +50,15 @@ function Navigation({
     <div className={styles.Navigation}>
       <Button
         plain
-        icon="chevronLeft"
+        icon={ChevronLeftMinor}
         disabled={isScrolledFarthestLeft}
         accessibilityLabel={leftA11yLabel}
         onClick={navigateTableLeft}
       />
       {pipMarkup}
       <Button
         plain
-        icon="chevronRight"
+        icon={ChevronRightMinor}
         disabled={isScrolledFarthestRight}
         accessibilityLabel={rightA11yLabel}
         onClick={navigateTableRight}

src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {ArrowLeftMinor, ArrowRightMinor} from '@shopify/polaris-icons';
 import {noop} from '@shopify/javascript-utilities/other';
 import {
   Range,
@@ -135,7 +136,7 @@ export class DatePicker extends React.PureComponent<CombinedProps, State> {
         <div className={styles.Header}>
           <Button
             plain
-            icon="arrowLeft"
+            icon={ArrowLeftMinor}
             accessibilityLabel={intl.translate(
               'Polaris.DatePicker.previousMonth',
               {
@@ -152,7 +153,7 @@ export class DatePicker extends React.PureComponent<CombinedProps, State> {
           />
           <Button
             plain
-            icon="arrowRight"
+            icon={ArrowRightMinor}
             accessibilityLabel={intl.translate('Polaris.DatePicker.nextMonth', {
               nextMonth,
               nextYear,

src/components/Page/components/Header/Header.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import {classNames} from '@shopify/react-utilities/styles';
 import {
   DisableableAction,
@@ -192,7 +193,7 @@ class Header extends React.PureComponent<CombinedProps, State> {
           activator={
             <Button
               plain
-              icon="horizontalDots"
+              icon={HorizontalDotsMinor}
               onClick={this.handleRollupToggle}
             />
           }

src/components/ResourceList/components/Item/Item.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import {classNames} from '@shopify/react-utilities/styles';
 import {createUniqueIDFactory, noop} from '@shopify/javascript-utilities/other';
 import compose from '@shopify/react-compose';
@@ -178,7 +179,7 @@ export class Item extends React.PureComponent<CombinedProps, State> {
                   )}
                   onClick={this.handleActionsClick}
                   plain
-                  icon="horizontalDots"
+                  icon={HorizontalDotsMinor}
                 />
               }
               onClose={this.handleCloseRequest}