Material UI - Custom IconButton with variant props like the real Button

Question

This is my first post so sorry if i forget anything ...

For my work i have to use Material UI and i need an IconButton with some contained style like the real Button!

I managed to do it with a full copy paste of the Mui Component : https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/IconButton/IconButton.js

What i've done is simply added the code and the style for a contained style based on the Button component but i think it's not the proper way to do it ... i would like to import the IconButton as an alias and add the variant props with some new styles but i don't know how to do it.

Here is my component :

import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '@material-ui/core/styles/withStyles';
import ButtonBase from '@material-ui/core/ButtonBase';
import { fade } from '@material-ui/core/styles/colorManipulator';
import capitalize from '@material-ui/core/utils/capitalize';

// TODO Better use of MUI possible ? -> Not copying the component but overriding it ?
// TODO Bug with Dark Mode

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    textAlign: 'center',
    flex: '0 0 auto',
    fontSize: theme.typography.pxToRem(24),
    padding: 12,
    margin: theme.spacing(0, 0.5),
    borderRadius: '50%',
    overflow: 'visible', // Explicitly set the default value to solve a bug on IE 11.
    color: theme.palette.action.active,
    transition: theme.transitions.create('background-color', {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      backgroundColor: 'transparent',
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the root element if `variant="text"`. */
  text: {
    padding: '6px 8px',
  },
  /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
  textPrimary: {
    color: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
  textSecondary: {
    color: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="on"`. */
  textOn: {
    color: theme.palette.success.main,
    '&:hover': {
      backgroundColor: theme.palette.success.main,
      color: theme.palette.getContrastText(theme.palette.success.main),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="off"`. */
  textOff: {
    color: theme.palette.warning.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.warning.dark, theme.palette.action.activatedOpacity),
      color: theme.palette.getContrastText(theme.palette.warning.main),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="error"`. */
  textError: {
    color: theme.palette.error.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="white"`. */
  textWhite: {
    color: theme.palette.background.paper,
    '&:hover': {
      backgroundColor: fade(theme.palette.background.paper, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: fade(theme.palette.primary.contrastText, theme.palette.action.disabledOpacity),
      boxShadow: theme.shadows[0],
      backgroundColor: theme.palette.action.disabledBackground,
    },
  },
  /* Styles applied to the root element if `variant="outlined"`. */
  outlined: {
    padding: '5px 15px',
    border: `1px solid ${
      theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
    }`,
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabledBackground}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
  outlinedPrimary: {
    color: theme.palette.primary.main,
    border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.primary.main}`,
      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
  outlinedSecondary: {
    color: theme.palette.secondary.main,
    border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.secondary.main}`,
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabled}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="text"`. */
  outlinedText: {
    color: theme.palette.getContrastText(theme.palette.background.relevant),
    border: `1px solid ${fade(theme.palette.getContrastText(theme.palette.background.relevant), 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.getContrastText(theme.palette.background.relevant)}`,
      backgroundColor: fade(theme.palette.getContrastText(theme.palette.background.relevant), theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      label: {
        color: theme.palette.text.primary,
      },
    },
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabled}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="white"`. */
  outlinedWhite: {
    color: theme.palette.background.paper,
    border: `1px solid ${theme.palette.background.paper}`,
    boxSizing: "border-box",
    '&:hover': {
      border: `1px solid ${theme.palette.background.paper}`,
      backgroundColor: fade(theme.palette.background.paper, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      label: {
        color: theme.palette.background.paper,
      },
    },
    '&$disabled': {
      border: `1px solid ${fade(theme.palette.background.paper, theme.palette.action.disabledOpacity)}`,
      color: fade(theme.palette.background.paper, theme.palette.action.disabledOpacity),
    },
  },
  /* Styles applied to the root element if `variant="contained"`. */
  contained: {
    color: theme.palette.getContrastText(theme.palette.grey[300]),
    backgroundColor: theme.palette.grey[300],
    boxShadow: theme.shadows[2],
    '&:hover': {
      backgroundColor: theme.palette.grey.A100,
      boxShadow: theme.shadows[4],
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        boxShadow: theme.shadows[2],
        backgroundColor: theme.palette.grey[300],
      },
      '&$disabled': {
        backgroundColor: theme.palette.action.disabledBackground,
      },
    },
    '&$focusVisible': {
      boxShadow: theme.shadows[6],
    },
    '&:active': {
      boxShadow: theme.shadows[8],
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
      boxShadow: theme.shadows[0],
      backgroundColor: theme.palette.action.disabledBackground,
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
  containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.primary.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedSecondary: {
    color: theme.palette.secondary.contrastText,
    backgroundColor: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.secondary.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedText: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.text.primary,
    '&:hover': {
      backgroundColor: theme.palette.text.secondary,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.text.primary,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedOn: {
    color: theme.palette.success.contrastText,
    backgroundColor: theme.palette.success.main,
    '&:hover': {
      backgroundColor: theme.palette.success.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.success.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedOff: {
    color: theme.palette.warning.contrastText,
    backgroundColor: theme.palette.warning.main,
    '&:hover': {
      backgroundColor: theme.palette.warning.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.warning.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedError: {
    color: theme.palette.error.contrastText,
    backgroundColor: theme.palette.error.main,
    '&:hover': {
      backgroundColor: theme.palette.error.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.error.main,
      },
    },
  },
  /* Pseudo-class 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%',
    display: 'flex',
    alignItems: 'inherit',
    justifyContent: 'inherit',
    "& .MuiSvgIcon-root": {
      width: theme.typography.pxToRem(20),
      height: theme.typography.pxToRem(20)
    }
  },
});

/**
 * Refer to the [Icons](/components/icons/) section of the documentation
 * regarding the available icon options.
 */
const IconButton = React.forwardRef(function IconButton(props, ref) {
  const {
    edge = false,
    children,
    classes,
    className,
    color = 'primary',
    disabled = false,
    disableFocusRipple = false,
    size = 'medium',
    variant = 'text',
    ...other
  } = props;

  return (
    <ButtonBase
      className={clsx(
        classes.root,
        {
          [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit',
          [classes.disabled]: disabled,
          [classes[`size${capitalize(size)}`]]: size !== 'medium',
          [classes.edgeStart]: edge === 'start',
          [classes.edgeEnd]: edge === 'end',
        },
        className,
      )}
      centerRipple
      focusRipple={!disableFocusRipple}
      disabled={disabled}
      ref={ref}
      {...other}
    >
      <span className={classes.label}>{children}</span>
    </ButtonBase>
  );
});

IconButton.propTypes = {
  /**
   * The icon element.
   */
  children: chainPropTypes(PropTypes.node, (props) => {
    const found = React.Children.toArray(props.children).some(
      (child) => React.isValidElement(child) && child.props.onClick,
    );

    if (found) {
      return new Error(
        [
          'Material-UI: You are providing an onClick event listener ' +
            'to a child of a button element.',
          'Firefox will never trigger the event.',
          'You should move the onClick listener to the parent button element.',
          'https://github.com/mui-org/material-ui/issues/13957',
        ].join('\n'),
      );
    }

    return null;
  }),
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'text', 'on', 'off', 'error', 'white']),
  /**
   * If `true`, the button will be disabled.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the  keyboard focus ripple will be disabled.
   */
  disableFocusRipple: PropTypes.bool,
  /**
   * If `true`, the ripple effect will be disabled.
   */
  disableRipple: PropTypes.bool,
  /**
   * If given, uses a negative margin to counteract the padding on one
   * side (this is often helpful for aligning the left or right
   * side of the icon with content above or below, without ruining the border
   * size and shape).
   */
  edge: PropTypes.oneOf(['start', 'end', false]),
  /**
   * The size of the button.
   * `small` is equivalent to the dense button styling.
   */
  size: PropTypes.oneOf(['small', 'medium']),
  /**
   * The variant to use.
   */
  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
};

export default withStyles(styles, { name: 'AgatheIconButton' })(IconButton);

This implementation also give me an error with the dark mode and seems hard to maintain. Thanks a lot for your help !

Answer 1

With TS only and Mui v5 - If you are familiar with module augmentation and custom overrides, this is how it can be done in a more sophisticated manner (pure styling, and no need for creating styled components).

You need a new property called 'variant' as part of IconButtonProps (in the index.ts file where your theme configuration is generated):

declare module '@mui/material/IconButton' {
    interface IconButtonOwnProps {
        variant?: 'standard' | 'contained';
    }
}

And now in your theme configuration object:

const themeConfig : ThemeOptions = {
    ...
    components: {
        MuiIconButton: {
            root: ({ theme, ownerState }) => ({
                padding: 1,
                borderWidth: '2px',
                borderStyle: 'solid',
                borderColor: 'transparent',
                ...(ownerState.variant === 'contained'
                ? {
                    [`&.${iconButtonClasses.disabled}`]: {
                    backgroundColor: alpha(
                    ownerState.color === 'success'
                        ? theme.palette.success[700]
                        : ownerState.color === 'error'
                        ? theme.palette.error[700]
                        : ownerState.color === 'warning'
                        ? theme.palette.warning[700]
                        : ownerState.color === 'primary'
                        ? theme.palette.primary[700]
                        : ownerState.color === 'secondary'
                        ? theme.palette.secondary[700]
                        : ownerState.color === 'subtle'
                        ? theme.palette.subtle[700]
                        : ownerState.color === 'highlight'
                        ? theme.palette.highlight[700]
                        : ownerState.color === 'tertiary'
                        ? theme.palette.tertiary[700]
                        : theme.palette.grey[700],
                    0.55
                    ),
                },
                [`&:hover`]: {
                    backgroundColor:
                    ownerState.color === 'success'
                        ? theme.palette.success[800]
                        : ownerState.color === 'error'
                        ? theme.palette.error[800]
                        : ownerState.color === 'warning'
                        ? theme.palette.warning[800]
                        : ownerState.color === 'primary'
                        ? theme.palette.primary[800]
                        : ownerState.color === 'secondary'
                        ? theme.palette.secondary[800]
                        : ownerState.color === 'subtle'
                        ? theme.palette.subtle[800]
                        : ownerState.color === 'highlight'
                        ? theme.palette.highlight[700]
                        : ownerState.color === 'tertiary'
                        ? theme.palette.tertiary[800]
                        : theme.palette.grey[800],
                    },
                    [`&:focus.Mui-focusVisible`]: {
                        boxShadow: `2px 3px 6px ${theme.palette.grey[500]}`,
                    },
                    backgroundColor:
                        ownerState.color === 'success'
                        ? theme.palette.success[700]
                        : ownerState.color === 'error'
                        ? theme.palette.error[700]
                        : ownerState.color === 'warning'
                        ? theme.palette.warning[700]
                        : ownerState.color === 'primary'
                        ? theme.palette.primary[700]
                        : ownerState.color === 'secondary'
                        ? theme.palette.secondary[700]
                        : ownerState.color === 'subtle'
                        ? theme.palette.subtle[700]
                        : ownerState.color === 'highlight'
                        ? theme.palette.highlight[700]
                        : ownerState.color === 'tertiary'
                        ? theme.palette.tertiary[700]
                        : theme.palette.grey[700],
                    color:
                        ownerState.color === 'success'
                        ? theme.palette.success.contrastText
                        : ownerState.color === 'error'
                        ? theme.palette.error.contrastText
                        : ownerState.color === 'warning'
                        ? theme.palette.warning.contrastText
                        : ownerState.color === 'primary'
                        ? theme.palette.primary.contrastText
                        : ownerState.color === 'secondary'
                        ? theme.palette.secondary.contrastText
                        : ownerState.color === 'subtle'
                        ? theme.palette.subtle.contrastText
                        : ownerState.color === 'highlight'
                        ? theme.palette.highlight.contrastText
                        : ownerState.color === 'tertiary'
                        ? theme.palette.tertiary.contrastText
                        : '#fff',
                    }
                : {
                    [`&:focus.Mui-focusVisible`]: {
                        borderColor: `${theme.palette.secondary.main}`,
                    },
                }),
                fontSize: 22,
            }),
        },
    }
};

You can customize the styles for the 'contained' variant type, as per your taste.

Now you can use native Mui provided out-of-the-box IconButton with the variant prop in place:

<IconButton sx={{ mr: 3 }} variant='contained'>
    <DeleteIcon fontSize='inherit' />
</IconButton>

Answer 2

Improved the original answer written by C. B. Prosser.

• Set hover color based on Mui theme hover
• Add outlined-reverse variant
• Prevent outline overflow outside of button

type IconButtonVariant = Exclude<ButtonProps["variant"], "text"> | "outlined-reverse";

const StyledIconButton = styled(IconButton)<{
    variant?: IconButtonVariant;
}>(({ theme, variant, color, disabled }) => {
    const overrides: CSSObject = {};
    overrides.borderRadius = theme.spacing(1);

    const colorAsVariant =
        color === undefined || color === "inherit" || color === "default"
            ? "primary"
            : color;
    if (variant === "contained") {
        if (disabled) {
            overrides["&:disabled"] = {
                backgroundColor: theme.palette.action.disabled,
            };
        }
        overrides[":hover"] = {
            backgroundColor: getHoverColorFromHex(
                theme.palette[colorAsVariant].main
            ),
        };
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.color = theme.palette[colorAsVariant].contrastText;
    }
    if (variant === "outlined") {
        overrides.outline = `1px solid ${
            disabled
                ? theme.palette.action.disabled
                : theme.palette[colorAsVariant].main
        }`;
        overrides.outlineOffset = "-1px";
        overrides.color = theme.palette[colorAsVariant].main;
    }
    if (variant === "outlined-reverse") {
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.outline = `1px solid ${theme.palette[colorAsVariant].contrastText}`;
        overrides.outlineOffset = "-1px";
        overrides.color = theme.palette[colorAsVariant].contrastText;
    }

    return {
        ...overrides,
    };
});

function hexToRgb(hex: any) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(
        shorthandRegex,
        function (m: any, r: any, g: any, b: any) {
            return r + r + g + g + b + b;
        }
    );

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
        ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16),
          }
        : null;
}

function getHoverColorFromHex(hex: any) {
    const rgb = hexToRgb(hex);
    if (rgb) {
        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`;
    }
    return hex;
}

Answer 3

If using MUI v5, you can use the following component to imitate the variant prop on Button components for IconButtons:

const StyledIconButton = styled(IconButton)<{
    variant?: Exclude<ButtonProps['variant'], 'text'>;
}>(({ theme, variant, color }) => {
    const overrides: CSSObject = {};

    const colorAsVariant = color === undefined || color === 'inherit' || color === 'default' ? 'primary' : color;

    if (variant === 'contained') {
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.color = theme.palette[colorAsVariant].contrastText;
        overrides[':hover'] = {
            backgroundColor: theme.palette[colorAsVariant].dark,
        };
    }

    if (variant === 'outlined') {
        overrides.border = `1px solid ${theme.palette[colorAsVariant].main}`;
        overrides.color = theme.palette[colorAsVariant].main;
    }

    return {
        ...overrides,
    };
});

it would then be used as such:

<StyledIconButton variant="contained">
    <LoopIcon />
</StyledIconButton>

example CodeSandbox