[IconButton] Add a size prop

docs/src/pages/demos/buttons/ButtonSizes.js

@@ -7,6 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import NavigationIcon from '@material-ui/icons/Navigation';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
 const styles = theme => ({
   margin: {
@@ -92,6 +93,9 @@ function ButtonSizes(props) {
         </Fab>
       </div>
       <div>
+        <IconButton aria-label="Delete" className={classes.margin} size="small">
+          <ArrowDownwardIcon fontSize="inherit" />
+        </IconButton>
         <IconButton aria-label="Delete" className={classes.margin}>
           <DeleteIcon fontSize="small" />
         </IconButton>

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

@@ -8,7 +8,7 @@ export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
     userSelect: 'none',
-    fontSize: 24,
+    fontSize: theme.typography.pxToRem(24),
     width: '1em',
     height: '1em',
     // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
@@ -41,11 +41,11 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `fontSize="small"`. */
   fontSizeSmall: {
-    fontSize: 20,
+    fontSize: theme.typography.pxToRem(20),
   },
   /* Styles applied to the root element if `fontSize="large"`. */
   fontSizeLarge: {
-    fontSize: 36,
+    fontSize: theme.typography.pxToRem(36),
   },
 });
 

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

@@ -6,6 +6,7 @@ export interface IconButtonProps extends StandardProps<ButtonBaseProps, IconButt
   color?: PropTypes.Color;
   disabled?: boolean;
   disableRipple?: boolean;
+  size?: 'small' | 'medium';
 }
 
 export type IconButtonClassKey =
@@ -14,6 +15,7 @@ export type IconButtonClassKey =
   | 'colorPrimary'
   | 'colorSecondary'
   | 'disabled'
+  | 'sizeSmall'
   | 'label';
 
 declare const IconButton: React.ComponentType<IconButtonProps>;

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

@@ -64,6 +64,11 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `disabled={true}`. */
   disabled: {},
+  /* Styles applied to the root element if `size="small"`. */
+  sizeSmall: {
+    padding: 3,
+    fontSize: theme.typography.pxToRem(18),
+  },
   /* Styles applied to the children container element. */
   label: {
     width: '100%',
@@ -78,7 +83,7 @@ export const styles = theme => ({
  * regarding the available icon options.
  */
 const IconButton = React.forwardRef(function IconButton(props, ref) {
-  const { children, classes, className, color, disabled, ...other } = props;
+  const { children, classes, className, color, disabled, size, ...other } = props;
 
   return (
     <ButtonBase
@@ -87,6 +92,7 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
         {
           [classes[`color${capitalize(color)}`]]: color !== 'default',
           [classes.disabled]: disabled,
+          [classes[`size${capitalize(size)}`]]: size !== 'medium',
         },
         className,
       )}
@@ -141,11 +147,17 @@ IconButton.propTypes = {
    * If `true`, the button will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * The size of the button.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
 };
 
 IconButton.defaultProps = {
   color: 'default',
   disabled: false,
+  size: 'medium',
 };
 
 export default withStyles(styles, { name: 'MuiIconButton' })(IconButton);

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

@@ -3,7 +3,12 @@ import ReactDOM from 'react-dom';
 import { spy } from 'sinon';
 import { assert } from 'chai';
 import PropTypes from 'prop-types';
-import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
+import {
+  createShallow,
+  createMount,
+  getClasses,
+  findOutermostIntrinsic,
+} from '@material-ui/core/test-utils';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import Icon from '../Icon';
 import ButtonBase from '../ButtonBase';
@@ -85,6 +90,18 @@ describe('<IconButton />', () => {
     assert.strictEqual(wrapper.props().centerRipple, true);
   });
 
+  describe('prop: size', () => {
+    it('should render the right class', () => {
+      let wrapper;
+      wrapper = mount(<IconButton size="small">book</IconButton>);
+      assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.sizeSmall), true);
+      wrapper = mount(<IconButton size="medium">book</IconButton>);
+      assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.sizeSmall), false);
+      wrapper = mount(<IconButton>book</IconButton>);
+      assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.sizeSmall), false);
+    });
+  });
+
   describe('prop: disabled', () => {
     it('should disable the component', () => {
       const wrapper = shallow(<IconButton disabled>book</IconButton>);

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

@@ -13,7 +13,7 @@ export const styles = theme => ({
     display: 'inline-block',
     fill: 'currentColor',
     flexShrink: 0,
-    fontSize: 24,
+    fontSize: theme.typography.pxToRem(24),
     transition: theme.transitions.create('fill', {
       duration: theme.transitions.duration.shorter,
     }),
@@ -44,11 +44,11 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `fontSize="small"`. */
   fontSizeSmall: {
-    fontSize: 20,
+    fontSize: theme.typography.pxToRem(20),
   },
   /* Styles applied to the root element if `fontSize="large"`. */
   fontSizeLarge: {
-    fontSize: 35,
+    fontSize: theme.typography.pxToRem(35),
   },
 });
 

pages/api/icon-button.md

@@ -23,6 +23,7 @@ regarding the available icon options.
 | <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;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br></span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
+| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'<br></span> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
 
 Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base/)).
 
@@ -39,6 +40,7 @@ This property accepts the following keys:
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">label</span> | Styles applied to the children container element.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section