[IconButton] Add size large and update styles

docs/pages/api-docs/icon-button.json

@@ -22,7 +22,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },
@@ -39,6 +39,8 @@
       "colorSecondary",
       "disabled",
       "sizeSmall",
+      "sizeMedium",
+      "sizeLarge",
       "label"
     ],
     "globalClasses": { "disabled": "Mui-disabled" },

docs/src/pages/components/buttons/ButtonSizes.tsx

@@ -45,6 +45,12 @@ export default function ButtonSizes() {
         <IconButton aria-label="delete">
           <DeleteIcon />
         </IconButton>
+        <IconButton aria-label="delete" size="large">
+          <DeleteIcon />
+        </IconButton>
+        <IconButton aria-label="delete" size="large">
+          <DeleteIcon fontSize="inherit" />
+        </IconButton>
         <IconButton aria-label="delete">
           <DeleteIcon fontSize="large" />
         </IconButton>

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

@@ -48,6 +48,16 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code>"
+    },
     "label": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the children container element"

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

@@ -54,7 +54,7 @@ export type IconButtonTypeMap<
      * `small` is equivalent to the dense button styling.
      * @default 'medium'
      */
-    size?: OverridableStringUnion<'small' | 'medium', IconButtonPropsSizeOverrides>;
+    size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

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

@@ -46,7 +46,7 @@ const IconButtonRoot = styled(ButtonBase, {
     textAlign: 'center',
     flex: '0 0 auto',
     fontSize: theme.typography.pxToRem(24),
-    padding: 12,
+    padding: 8,
     borderRadius: '50%',
     overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
     color: theme.palette.action.active,
@@ -98,9 +98,14 @@ const IconButtonRoot = styled(ButtonBase, {
     }),
     /* Styles applied to the root element if `size="small"`. */
     ...(styleProps.size === 'small' && {
-      padding: 3,
+      padding: 6,
       fontSize: theme.typography.pxToRem(18),
     }),
+    /* Styles applied to the root element if `size="small"`. */
+    ...(styleProps.size === 'large' && {
+      padding: 12,
+      fontSize: theme.typography.pxToRem(28),
+    }),
     /* Styles applied to the root element if `disabled={true}`. */
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
@@ -239,7 +244,7 @@ IconButton.propTypes /* remove-proptypes */ = {
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['medium', 'small']),
+    PropTypes.oneOf(['small', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**

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

@@ -70,8 +70,12 @@ describe('<IconButton />', () => {
       root = render(<IconButton size="medium">book</IconButton>).container.firstChild;
       expect(root).not.to.have.class(classes.sizeSmall);
 
+      root = render(<IconButton size="large">book</IconButton>).container.firstChild;
+      expect(root).to.have.class(classes.sizeLarge);
+
       root = render(<IconButton>book</IconButton>).container.firstChild;
       expect(root).not.to.have.class(classes.sizeSmall);
+      expect(root).not.to.have.class(classes.sizeLarge);
     });
   });
 

packages/material-ui/src/IconButton/iconButtonClasses.ts

@@ -17,6 +17,10 @@ export interface IconButtonClasses {
   disabled: string;
   /** Styles applied to the root element if `size="small"`. */
   sizeSmall: string;
+  /** Styles applied to the root element if `size="medium"`. */
+  sizeMedium: string;
+  /** Styles applied to the root element if `size="large"`. */
+  sizeLarge: string;
   /** Styles applied to the children container element. */
   label: string;
 }
@@ -37,6 +41,7 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt
   'edgeEnd',
   'sizeSmall',
   'sizeMedium',
+  'sizeLarge',
   'label',
 ]);