diff --git a/docs/src/pages/demos/buttons/ButtonSizes.js b/docs/src/pages/demos/buttons/ButtonSizes.js
index ac9047920f8fb9..0644de27dbd963 100644
--- a/docs/src/pages/demos/buttons/ButtonSizes.js
+++ b/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) {
+
+
+
diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts
index a6bd70eaa52536..4ab997f1627447 100644
--- a/packages/material-ui/src/IconButton/IconButton.d.ts
+++ b/packages/material-ui/src/IconButton/IconButton.d.ts
@@ -6,6 +6,7 @@ export interface IconButtonProps extends StandardProps
({
alignItems: 'inherit',
justifyContent: 'inherit',
},
+ /* Styles applied to the root element if `size="small"`. */
+ sizeSmall: {
+ padding: 3,
+ minWidth: 24,
+ fontSize: 18,
+ },
});
/**
@@ -78,7 +84,7 @@ export const styles = theme => ({
* 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 (
', () => {
assert.strictEqual(wrapper.props().centerRipple, true);
});
+ it('should render with sizeSmall class when prop size="small" provided', () => {
+ const wrapper = shallow(book);
+ assert.strictEqual(wrapper.hasClass(classes.sizeSmall), true);
+ });
+
describe('prop: disabled', () => {
it('should disable the component', () => {
const wrapper = shallow(book);
diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index be64879395e86c..b2224738aa4f89 100644
--- a/pages/api/icon-button.md
+++ b/pages/api/icon-button.md
@@ -24,6 +24,7 @@ regarding the available icon options.
| color | enum: 'default' |
'inherit' |
'primary' |
'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. |
| disabled | bool | false | If `true`, the button will be disabled. |
| disableRipple | bool | | If `true`, the ripple will be disabled. |
+| size | enum: 'small' |
'medium'
| 'medium' | 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:
| colorSecondary | Styles applied to the root element if `color="secondary"`.
| disabled | Styles applied to the root element if `disabled={true}`.
| label | Styles applied to the children container element.
+| sizeSmall | 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)