[icons] Add fontSize small and large

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

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
 import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 const styles = theme => ({
   button: {
@@ -55,6 +57,17 @@ function ButtonSizes(props) {
           <AddIcon />
         </Button>
       </div>
+      <div>
+        <IconButton aria-label="Delete" className={classes.button}>
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+        <IconButton aria-label="Delete" className={classes.button}>
+          <DeleteIcon />
+        </IconButton>
+        <IconButton aria-label="Delete" className={classes.button}>
+          <DeleteIcon fontSize="large" />
+        </IconButton>
+      </div>
     </div>
   );
 }

docs/src/pages/demos/buttons/buttons.md

@@ -73,12 +73,6 @@ animation to finish before the new one enters.
 
 {{"demo": "pages/demos/buttons/FloatingActionButtonZoom.js"}}
 
-## Sizes
-
-Fancy larger or smaller buttons? Use the `size` or the `mini` property.
-
-{{"demo": "pages/demos/buttons/ButtonSizes.js"}}
-
 ## Icon Buttons
 
 Icon buttons are commonly found in app bars and toolbars.
@@ -88,6 +82,12 @@ deselected, such as adding or removing a star to an item.
 
 {{"demo": "pages/demos/buttons/IconButtons.js"}}
 
+## Sizes
+
+Fancy larger or smaller buttons? Use the `size` or the `mini` property.
+
+{{"demo": "pages/demos/buttons/ButtonSizes.js"}}
+
 ### Buttons with icons and label
 
 Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

docs/src/pages/demos/selection-controls/CheckboxLabels.js

@@ -18,13 +18,6 @@ const styles = {
     },
   },
   checked: {},
-  size: {
-    width: 40,
-    height: 40,
-  },
-  sizeIcon: {
-    fontSize: 20,
-  },
 };
 
 class CheckboxLabels extends React.Component {
@@ -106,9 +99,8 @@ class CheckboxLabels extends React.Component {
         <FormControlLabel
           control={
             <Checkbox
-              className={classes.size}
-              icon={<CheckBoxOutlineBlankIcon className={classes.sizeIcon} />}
-              checkedIcon={<CheckBoxIcon className={classes.sizeIcon} />}
+              icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+              checkedIcon={<CheckBoxIcon fontSize="small" />}
               value="checkedI"
             />
           }

docs/src/pages/demos/selection-controls/RadioButtons.js

@@ -14,13 +14,6 @@ const styles = {
     },
   },
   checked: {},
-  size: {
-    width: 40,
-    height: 40,
-  },
-  sizeIcon: {
-    fontSize: 20,
-  },
 };
 
 class RadioButtons extends React.Component {
@@ -77,9 +70,8 @@ class RadioButtons extends React.Component {
           color="default"
           name="radio-button-demo"
           aria-label="E"
-          className={classes.size}
-          icon={<RadioButtonUncheckedIcon className={classes.sizeIcon} />}
-          checkedIcon={<RadioButtonCheckedIcon className={classes.sizeIcon} />}
+          icon={<RadioButtonUncheckedIcon fontSize="small" />}
+          checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
         />
       </div>
     );

docs/src/pages/style/icons/FontAwesome.js

@@ -48,7 +48,7 @@ class FontAwesome extends React.Component {
         <Icon
           className={classNames(classes.icon, 'fa fa-plus-circle')}
           color="disabled"
-          style={{ fontSize: 36 }}
+          fontSize="large"
         />
       </div>
     );

docs/src/pages/style/icons/Icons.js

@@ -39,7 +39,7 @@ function Icons(props) {
       <Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
         add_circle
       </Icon>
-      <Icon className={classes.icon} color="disabled" style={{ fontSize: 36 }}>
+      <Icon className={classes.icon} color="disabled" fontSize="large">
         add_circle
       </Icon>
     </div>

docs/src/pages/style/icons/SvgIcons.js

@@ -39,11 +39,11 @@ function SvgIcons(props) {
       <HomeIcon className={classes.icon} color="secondary" />
       <HomeIcon className={classes.icon} color="action" />
       <HomeIcon className={classes.iconHover} color="error" style={{ fontSize: 30 }} />
-      <HomeIcon color="disabled" className={classes.icon} style={{ fontSize: 36 }} />
+      <HomeIcon color="disabled" className={classes.icon} fontSize="large" />
       <HomeIcon
         className={classes.icon}
         color="primary"
-        style={{ fontSize: 36 }}
+        fontSize="large"
         component={svgProps => (
           <svg {...svgProps}>
             <defs>

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

@@ -4,7 +4,8 @@ import { StandardProps, PropTypes } from '..';
 export interface IconProps
   extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, IconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
-  fontSize?: 'inherit' | 'default';
+  component?: React.ReactType<IconProps>;
+  fontSize?: 'inherit' | 'default' | 'small' | 'large';
 }
 
 export type IconClassKey =
@@ -14,7 +15,9 @@ export type IconClassKey =
   | 'colorDisabled'
   | 'colorError'
   | 'colorPrimary'
-  | 'fontSizeInherit';
+  | 'fontSizeInherit'
+  | 'fontSizeSmall'
+  | 'fontSizeLarge';
 
 declare const Icon: React.ComponentType<IconProps>;
 

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

@@ -39,13 +39,21 @@ export const styles = theme => ({
   fontSizeInherit: {
     fontSize: 'inherit',
   },
+  /* Styles applied to the root element if `fontSize="small"`. */
+  fontSizeSmall: {
+    fontSize: 20,
+  },
+  /* Styles applied to the root element if `fontSize="large"`. */
+  fontSizeLarge: {
+    fontSize: 36,
+  },
 });
 
 function Icon(props) {
-  const { children, classes, className, color, fontSize, ...other } = props;
+  const { children, classes, className, color, component: Component, fontSize, ...other } = props;
 
   return (
-    <span
+    <Component
       className={classNames(
         'material-icons',
         classes.root,
@@ -59,7 +67,7 @@ function Icon(props) {
       {...other}
     >
       {children}
-    </span>
+    </Component>
   );
 }
 
@@ -81,14 +89,20 @@ Icon.propTypes = {
    * The color of the component. It supports those theme colors that make sense for this component.
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    */
-  fontSize: PropTypes.oneOf(['inherit', 'default']),
+  fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
 };
 
 Icon.defaultProps = {
   color: 'inherit',
+  component: 'span',
   fontSize: 'default',
 };
 

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

@@ -14,9 +14,7 @@ export const styles = theme => ({
     textAlign: 'center',
     flex: '0 0 auto',
     fontSize: theme.typography.pxToRem(24),
-    width: 48,
-    height: 48,
-    padding: 0,
+    padding: 12,
     borderRadius: '50%',
     overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
     color: theme.palette.action.active,

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.ReactType<SvgIconProps>;
-  fontSize?: 'inherit' | 'default';
+  fontSize?: 'inherit' | 'default' | 'small' | 'large';
   nativeColor?: string;
   titleAccess?: string;
   viewBox?: string;
@@ -18,7 +18,9 @@ export type SvgIconClassKey =
   | 'colorDisabled'
   | 'colorError'
   | 'colorPrimary'
-  | 'fontSizeInherit';
+  | 'fontSizeInherit'
+  | 'fontSizeSmall'
+  | 'fontSizeLarge';
 
 declare const SvgIcon: React.ComponentType<SvgIconProps>;
 

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

@@ -42,13 +42,21 @@ export const styles = theme => ({
   fontSizeInherit: {
     fontSize: 'inherit',
   },
+  /* Styles applied to the root element if `fontSize="small"`. */
+  fontSizeSmall: {
+    fontSize: 20,
+  },
+  /* Styles applied to the root element if `fontSize="large"`. */
+  fontSizeLarge: {
+    fontSize: 36,
+  },
 });
 
 function SvgIcon(props) {
   const {
     children,
     classes,
-    className: classNameProp,
+    className,
     color,
     component: Component,
     fontSize,
@@ -58,18 +66,16 @@ function SvgIcon(props) {
     ...other
   } = props;
 
-  const className = classNames(
-    classes.root,
-    {
-      [classes.fontSizeInherit]: fontSize === 'inherit',
-      [classes[`color${capitalize(color)}`]]: color !== 'inherit',
-    },
-    classNameProp,
-  );
-
   return (
     <Component
-      className={className}
+      className={classNames(
+        classes.root,
+        {
+          [classes[`color${capitalize(color)}`]]: color !== 'inherit',
+          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default',
+        },
+        className,
+      )}
       focusable="false"
       viewBox={viewBox}
       color={nativeColor}
@@ -110,7 +116,7 @@ SvgIcon.propTypes = {
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    */
-  fontSize: PropTypes.oneOf(['inherit', 'default']),
+  fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
   /**
    * Applies a color attribute to the SVG element.
    */

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

@@ -30,6 +30,9 @@ export const styles = theme => ({
   /* Styles applied to the internal `SwitchBase` component's `root` class. */
   switchBase: {
     zIndex: 1,
+    padding: 0,
+    height: 48,
+    width: 48,
     color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest,

pages/api/icon.md

@@ -22,7 +22,8 @@ import Icon from '@material-ui/core/Icon';
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The name of the icon font ligature. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br> | <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">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'<br> | <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">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <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 class="prop-default">'default'</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).
 
@@ -41,6 +42,8 @@ This property accepts the following keys:
 | <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
 | <span class="prop-name">fontSizeInherit</span> | 
+| <span class="prop-name">fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
+| <span class="prop-name">fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
 
 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/tree/master/packages/material-ui/src/Icon/Icon.js)

pages/api/svg-icon.md

@@ -23,7 +23,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br> | <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 `nativeColor` property to apply a color attribute to the SVG element. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <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'<br> | <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'&nbsp;&#124;<br>&nbsp;'default'&nbsp;&#124;<br>&nbsp;'small'&nbsp;&#124;<br>&nbsp;'large'<br> | <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">nativeColor</span> | <span class="prop-type">string |   | Applies a color attribute to the SVG element. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
 | <span class="prop-name">viewBox</span> | <span class="prop-type">string | <span class="prop-default">'0 0 24 24'</span> | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
@@ -45,6 +45,8 @@ This property accepts the following keys:
 | <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
 | <span class="prop-name">fontSizeInherit</span> | Styles applied to the root element if `fontSize="inherit"`.
+| <span class="prop-name">fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
+| <span class="prop-name">fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
 
 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/tree/master/packages/material-ui/src/SvgIcon/SvgIcon.js)