Add a size prop to IconButton

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/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 =

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

@@ -71,14 +71,20 @@ export const styles = theme => ({
     alignItems: 'inherit',
     justifyContent: 'inherit',
   },
+  /* Styles applied to the root element if `size="small"`. */
+  sizeSmall: {
+    padding: 3,
+    minWidth: 24,
+    fontSize: 18,
+  },
 });
 
 /**
  * Refer to the [Icons](/style/icons/) section of the documentation
  * regarding the available icon options.
  */
 function IconButton(props) {
-  const { children, classes, className, color, disabled, ...other } = props;
+  const { children, classes, className, color, disabled, size, ...other } = props;
 
   return (
     <ButtonBase
@@ -87,6 +93,7 @@ function IconButton(props) {
         {
           [classes[`color${capitalize(color)}`]]: color !== 'default',
           [classes.disabled]: disabled,
+          [classes.sizeSmall]: size === 'small',
         },
         className,
       )}
@@ -147,11 +154,17 @@ IconButton.propTypes = {
    * If `true`, the ripple will be disabled.
    */
   disableRipple: 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

@@ -85,6 +85,11 @@ describe('<IconButton />', () => {
     assert.strictEqual(wrapper.props().centerRipple, true);
   });
 
+  it('should render with sizeSmall class when prop size="small" provided', () => {
+    const wrapper = shallow(<IconButton size="small">book</IconButton>);
+    assert.strictEqual(wrapper.hasClass(classes.sizeSmall), true);
+  });
+
   describe('prop: disabled', () => {
     it('should disable the component', () => {
       const wrapper = shallow(<IconButton disabled>book</IconButton>);

pages/api/icon-button.md

@@ -24,6 +24,7 @@ regarding the available icon options.
 | <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">disableRipple</span> | <span class="prop-type">bool</span> |   | If `true`, the ripple 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/)).
 
@@ -41,6 +42,7 @@ This property accepts the following keys:
 | <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">label</span> | Styles applied to the children container element.
+| <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/IconButton/IconButton.js)