[Icon] Migrate to emotion

docs/pages/api-docs/icon.json

@@ -17,7 +17,8 @@
         "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
       },
       "default": "'medium'"
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Icon",
   "styles": {
@@ -40,5 +41,5 @@
   "filename": "/packages/material-ui/src/Icon/Icon.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/icons/\">Icons</a></li>\n<li><a href=\"/components/material-icons/\">Material Icons</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/translations/api-docs/icon/icon.json

@@ -6,7 +6,8 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the component. It supports those theme colors that make sense for this component.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size."
+    "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

framer/scripts/framerConfig.js

@@ -176,7 +176,7 @@ export const componentSettings = {
     template: 'fab.txt',
   },
   Icon: {
-    ignoredProps: ['children', 'fontSize'],
+    ignoredProps: ['children', 'fontSize', 'sx'],
     propValues: {
       icon: "'add'",
       theme: 'Filled',

packages/material-ui/src/Icon/Icon.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { PropTypes } from '..';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
@@ -47,6 +49,10 @@ export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
      * @default 'medium'
      */
     fontSize?: 'inherit' | 'large' | 'medium' | 'small';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

packages/material-ui/src/Icon/Icon.js

@@ -1,82 +1,105 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge } from '@material-ui/utils';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
+import { getIconUtilityClass } from './iconClasses';
 
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    userSelect: 'none',
-    fontSize: theme.typography.pxToRem(24),
-    width: '1em',
-    height: '1em',
-    // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
-    // To remove at some point.
-    overflow: 'hidden',
-    display: 'inline-block', // allow overflow hidden to take action
-    textAlign: 'center', // support non-square icon
-    flexShrink: 0,
-  },
-  /* Styles applied to the root element if `color="primary"`. */
-  colorPrimary: {
-    color: theme.palette.primary.main,
-  },
-  /* Styles applied to the root element if `color="secondary"`. */
-  colorSecondary: {
-    color: theme.palette.secondary.main,
-  },
-  /* Styles applied to the root element if `color="action"`. */
-  colorAction: {
-    color: theme.palette.action.active,
-  },
-  /* Styles applied to the root element if `color="error"`. */
-  colorError: {
-    color: theme.palette.error.main,
-  },
-  /* Styles applied to the root element if `color="disabled"`. */
-  colorDisabled: {
-    color: theme.palette.action.disabled,
-  },
-  /* Styles applied to the root element if `fontSize="inherit"`. */
-  fontSizeInherit: {
-    fontSize: 'inherit',
-  },
-  /* Styles applied to the root element if `fontSize="small"`. */
-  fontSizeSmall: {
-    fontSize: theme.typography.pxToRem(20),
-  },
-  /* Styles applied to the root element if `fontSize="large"`. */
-  fontSizeLarge: {
-    fontSize: theme.typography.pxToRem(36),
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.color !== 'inherit' && styles[`color${capitalize(styleProps.color)}`]),
+    ...styles[`fontSize${capitalize(styleProps.fontSize)}`],
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { color, fontSize, classes } = styleProps;
+
+  const slots = {
+    root: [
+      'root',
+      color !== 'inherit' && `color${capitalize(color)}`,
+      `fontSize${capitalize(fontSize)}`,
+    ],
+  };
+
+  return composeClasses(slots, getIconUtilityClass, classes);
+};
+
+const IconRoot = experimentalStyled(
+  'span',
+  {},
+  {
+    name: 'MuiIcon',
+    slot: 'Root',
+    overridesResolver,
   },
-});
+)(({ theme, styleProps }) => ({
+  /* Styles applied to the root element. */
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // To remove at some point.
+  overflow: 'hidden',
+  display: 'inline-block', // allow overflow hidden to take action
+  textAlign: 'center', // support non-square icon
+  flexShrink: 0,
+  fontSize: {
+    inherit: 'inherit',
+    small: theme.typography.pxToRem(20),
+    medium: theme.typography.pxToRem(24),
+    large: theme.typography.pxToRem(36),
+  }[styleProps.fontSize],
+  // TODO v5 deprecate, v6 remove for sx
+  color: {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    action: theme.palette.action.active,
+    error: theme.palette.error.main,
+    disabled: theme.palette.action.disabled,
+    inherit: undefined,
+  }[styleProps.color],
+}));
 
-const Icon = React.forwardRef(function Icon(props, ref) {
+const Icon = React.forwardRef(function Icon(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiIcon' });
   const {
     baseClassName = 'material-icons',
-    classes,
     className,
     color = 'inherit',
     component: Component = 'span',
     fontSize = 'medium',
     ...other
   } = props;
 
+  const styleProps = {
+    ...props,
+    baseClassName,
+    color,
+    component: Component,
+    fontSize,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Component
+    <IconRoot
+      as={Component}
       className={clsx(
         baseClassName,
         // Prevent the translation of the text content.
         // The font relies on the exact text content to render the icon.
         'notranslate',
         classes.root,
-        {
-          [classes[`color${capitalize(color)}`]]: color !== 'inherit',
-          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'medium',
-        },
         className,
       )}
+      styleProps={styleProps}
       aria-hidden
       ref={ref}
       {...other}
@@ -122,8 +145,12 @@ Icon.propTypes = {
    * @default 'medium'
    */
   fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
 Icon.muiName = 'Icon';
 
-export default withStyles(styles, { name: 'MuiIcon' })(Icon);
+export default Icon;

packages/material-ui/src/Icon/Icon.test.js

@@ -1,23 +1,21 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
 import Icon from './Icon';
+import classes from './iconClasses';
 
 describe('<Icon />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<Icon />);
-  });
-
-  describeConformance(<Icon>account_circle</Icon>, () => ({
+  describeConformanceV5(<Icon>account_circle</Icon>, () => ({
     classes,
     inheritComponent: 'span',
     mount,
+    muiName: 'MuiIcon',
     refInstanceof: window.HTMLSpanElement,
     testComponentPropWith: 'div',
+    skip: ['themeVariants', 'componentsProp'],
   }));
 
   it('renders children by default', () => {

packages/material-ui/src/Icon/iconClasses.d.ts

@@ -0,0 +1,18 @@
+export interface IconClasses {
+  root: string;
+  colorPrimary: string;
+  colorSecondary: string;
+  colorAction: string;
+  colorError: string;
+  colorDisabled: string;
+  fontSizeInherit: string;
+  fontSizeSmall: string;
+  fontSizeMedium: string;
+  fontSizeLarge: string;
+}
+
+declare const iconClasses: IconClasses;
+
+export function getIconUtilityClass(slot: string): string;
+
+export default iconClasses;

packages/material-ui/src/Icon/iconClasses.js

@@ -0,0 +1,20 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getIconUtilityClass(slot) {
+  return generateUtilityClass('MuiIcon', slot);
+}
+
+const iconClasses = generateUtilityClasses('MuiIcon', [
+  'root',
+  'colorPrimary',
+  'colorSecondary',
+  'colorAction',
+  'colorError',
+  'colorDisabled',
+  'fontSizeInherit',
+  'fontSizeSmall',
+  'fontSizeMedium',
+  'fontSizeLarge',
+]);
+
+export default iconClasses;

packages/material-ui/src/Icon/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Icon';
 export * from './Icon';
+export { default as iconClasses } from './iconClasses';
+export * from './iconClasses';

packages/material-ui/src/Icon/index.js

@@ -1 +1,3 @@
 export { default } from './Icon';
+export { default as iconClasses } from './iconClasses';
+export * from './iconClasses';

packages/material-ui/src/SvgIcon/SvgIcon.js

@@ -83,9 +83,9 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
 
   const styleProps = {
     ...props,
-    fontSize,
     color,
     component: Component,
+    fontSize,
     viewBox,
   };