Support replacing icons in various elements

[Studio384]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Some of the components in Material UI ship with built-in icons from the Material Design Icon set and only provide an option to replace them with other icons that don't require a component as Font Awesome does.

Examples 🌈

In case of Font Awesome, the following would be required to render the icon, but Material UI doesn't allow this.

<Select
  IconComponent={<FontAwesomeIcon icon={faChevronDown} />}
>

These are the places with the behavior I'd expect:

• Breadcrumbs's seperator property
• Button's startIcon and endIcon property
• BottomNavigationAction's icon property
• Tab's icon property
• AccordionSummary's expandIcon property
• Chip's icon and deleteIcon property

These components have icons that either can only be replaced with MUI icons or not at all:

• StepLabel
• Select
• TablePagination

I'm sure I missed of others.

Motivation 🔦

We use MUI, but are not looking to have Material Design as our design system. We're now stuck with using 2 iconsets; the iconset we use everywhere (being Font Awesome), and the iconset used by Material UI-components that don't allow for icons to be replaced.

My appologies if I'm overlooking something here.

[oliviertassinari]

These components have icons that either can only be replaced with MUI icons or not at all:

• StepLabel icon can be replaced with StepIconComponent prop.
• Select icon can be replaced with IconComponent prop.
• TablePagination icons can be replaced with the ActionsComponent prop.

[oliviertassinari]

@Studio384 I have two questions:

• if you have a preview of the design system you are working on, it would help us for Support a second design system #22485.
• would [material-ui][examples] Create a Storybook template #21111 be something you would have used if available?

[Studio384]

These components have icons that either can only be replaced with MUI icons or not at all:

• StepLabel icon can be replaced with StepIconComponent prop.
• Select icon can be replaced with IconComponent prop.
• TablePagination icons can be replaced with the ActionsComponent prop.

Then I've got to say that I'm 100% lost and that this seems like a gap in MUI's documentation on how to do that. Because in regards to Font Awesome; how would I do this? The example given above doesn't work for Select's while it does work in the components listed in "these do work". This seems just inconsistent and could use some better documentation. Right now, MUI just shorts out with the following error:

Warning: Failed prop type: Invalid prop IconComponent of type object supplied to ForwardRef(Select), expected a single ReactElement type.

Which, of course, is correct. <FontAwesomeIcon /> isn't a ReactElement but a node (which are allowed in the working examples given above) and that limitation currently doesn't allow me to replace these icons with the iconset we use (this was perhaps poorly explained as the issue currently heavily implies that only MUI icons can be used).

[oliviertassinari]

@Studio384 Right, you have to make sure the provided prop matches the expected type. It can either be an element or a component.

[nuarhu]

For anyone looking for a solution for using <FontAwesomeIcon /> as step icon - this might get you started. With these style settings it doesn't look as good as with the default material icons, though.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
// ... other imports omitted

const SomeStep = () => {
  return (
    return (
      <Step active={false} index={2}>
        <StepLabel StepIconComponent={StepDoneIcon}>
          {title}
        </StepLabel>
        <StepContent>
          <Typography>
            Some Info
          </Typography>
        </StepContent>
      </Step>
    )
}


interface FAStepIconProps extends StepIconProps {
  faIcon: IconDefinition
}

const FAStepIcon = ({faIcon, active}: FAStepIconProps) => {
  const theme = useTheme()

  return (
    <Box sx={{
      backgroundColor: active ? theme.palette.primary.main : theme.palette.grey['300'],
      borderRadius: 9999,
      padding: '2px',
      ml: '-2px'
    }}>
      <FontAwesomeIcon color="white" fixedWidth size="lg" icon={faIcon} />
    </Box>
  )
}

const StepDoneIcon = (props: StepIconProps) => {
  return (
    <FAStepIcon {...props} faIcon={faCheck} />
  )
}