[Icon] Change default fontSize name

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

@@ -5,7 +5,7 @@ export interface IconProps
   extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, IconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
   component?: React.ElementType<IconProps>;
-  fontSize?: 'inherit' | 'default' | 'small' | 'large';
+  fontSize?: 'inherit' | 'medium' | 'small' | 'large' | 'default';
 }
 
 export type IconClassKey =

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 
@@ -98,13 +99,24 @@ Icon.propTypes = {
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    */
-  fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
+  fontSize: chainPropTypes(
+    PropTypes.oneOf(['inherit', 'medium', 'small', 'large', 'default']),
+    props => {
+      if (props.fontSize === 'default') {
+        return new Error(
+          `The prop \`fontSize="default"\` of the \`Icon\` component is deprecated. Use fontSize="medium" instead.`,
+        );
+      }
+
+      return null;
+    },
+  ),
 };
 
 Icon.defaultProps = {
   color: 'inherit',
   component: 'span',
-  fontSize: 'default',
+  fontSize: 'medium',
 };
 
 Icon.muiName = 'Icon';

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

@@ -5,7 +5,7 @@ export interface SvgIconProps
   extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
   component?: React.ElementType<SvgIconProps>;
-  fontSize?: 'inherit' | 'default' | 'small' | 'large';
+  fontSize?: 'inherit' | 'medium' | 'small' | 'large' | 'default';
   htmlColor?: string;
   shapeRendering?: string;
   titleAccess?: string;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 
@@ -117,7 +118,18 @@ SvgIcon.propTypes = {
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    */
-  fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
+  fontSize: chainPropTypes(
+    PropTypes.oneOf(['inherit', 'medium', 'small', 'large', 'default']),
+    props => {
+      if (props.fontSize === 'default') {
+        return new Error(
+          `The prop \`fontSize="default"\` of the \`SvgIcon\` component is deprecated. Use fontSize="medium" instead.`,
+        );
+      }
+
+      return null;
+    },
+  ),
   /**
    * Applies a color attribute to the SVG element.
    */
@@ -146,7 +158,7 @@ SvgIcon.propTypes = {
 SvgIcon.defaultProps = {
   color: 'inherit',
   component: 'svg',
-  fontSize: 'default',
+  fontSize: 'medium',
   viewBox: '0 0 24 24',
 };
 

pages/api/icon.md

@@ -22,7 +22,7 @@ import Icon from '@material-ui/core/Icon';
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br></span> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'&nbsp;&#124;<br>&nbsp;'small'&nbsp;&#124;<br>&nbsp;'large'<br></span> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit', 'medium', 'small', 'large', 'default'<br></span> | <span class="prop-default">'medium'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 
 Any other properties supplied will be spread to the root element (native element).
 

pages/api/svg-icon.md

@@ -22,7 +22,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br></span> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `htmlColor` property to apply a color attribute to the SVG element. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'svg'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'&nbsp;&#124;<br>&nbsp;'small'&nbsp;&#124;<br>&nbsp;'large'<br></span> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit', 'medium', 'small', 'large', 'default'<br></span> | <span class="prop-default">'medium'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 | <span class="prop-name">htmlColor</span> | <span class="prop-type">string</span> |   | Applies a color attribute to the SVG element. |
 | <span class="prop-name">shapeRendering</span> | <span class="prop-type">string</span> |   | The shape-rendering attribute. The behavior of the different options is described on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). If you are having issues with blurry icons you should investigate this property. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string</span> |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |