To customize the delete icon in a Chip, you can utilize the class .MuiChip-deleteIcon as specified in the Chip api documentation (https://v4.mui.com/api/chip/)
If you want to experiment with this, here is a functioning example on codesandbox that covers both default and outlined variants.
Below is the code snippet to implement the desired changes:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";
import FaceIcon from "@material-ui/icons/Face";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(0.5)
},
//Customize the CSS for the delete icon below
"& .MuiChip-deleteIcon": {
marginRight: "20px", // Adjust values based on your preferences
},
//Customize the CSS for the delete icon in outlined variant
"& .MuiChip-outlined": {
"& .MuiChip-deleteIcon": {
marginRight: "10px", // Adjust values based on your preferences
}
}
}
}));
export default function Chips() {
const classes = useStyles();
const handleDelete = () => {
console.info("You clicked the delete icon.");
};
const handleClick = () => {
console.info("You clicked the Chip.");
};
return (
<div className={classes.root}>
<Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
/>
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
variant="outlined"
/>
</div>
);
}
Another approach would be to make similar changes within the theme settings.