Deactivate Pointer-Events of material-ui Edit Icon

Question

I'm trying to deactivate the pointer-events on an material-ui Edit-Icon. (My goal is that 'the hand' dissappears when hovering over the icon.)

import EditIcon from '@material-ui/icons/Create';
import { Button} from 'react-admin';

      <Button 
       label="Edit" startIcon={<EditIcon style={{pointerEvents:'none'}}/>}></Button>

I added inline-styling, but that did not help. Thanks!

Answer 1

For Mui v5+ using emotion style engine, the following would do it. For earlier versions, substitute sx for your styling engine.

import IconButton from '@mui/material/IconButton';
import EditIcon from "@mui/icons-material/Edit";

<IconButton sx={{ pointerEvents: "none", cursor: "not-allowed" }}>
  <EditIcon />
</IconButton>