type for material UI icons

Viewed 5637

I have a component that looks like this:

type IconButtonProps = { text: string ; onClick: () => void, icon: any};

export const IconButton: FunctionComponent<IconButtonProps> = ({
  text,
  onClick,
  icon,
}) => {
  const classes = useStyles();
  return (
    <Button className={classes.button} 
    onClick={onClick}
   >
     {' '}
    {icon}
     {text}
   </Button>
  );
};

and is called like this:


import SearchIcon from '@material-ui/icons/Search';

<IconButton text={'Search'} icon={<SearchIcon />} onClick={()=>SearchUsers()}></IconButton>

In the props, I am using any as the icon's type. What's the correct type to use? I want to avoid using any type.

2 Answers

Maybe import { SvgIconComponent } from "@material-ui/icons";

Use this way

export const IconButton: FunctionComponent = ({
  text,
  onClick,
  icon
}) => {
  const classes = useStyles();
  return (
    <Button className={classes.button} 
    onClick={onClick}
   >
     {' '}
    {icon}
     {text}
   </Button>
  );
};
Related