skip to Main Content

i need to add CheckCircleSharpIcon from ‘@mui/icons-material/CheckCircleSharp’ instead of bullet icon

{res?.map((radiooption, index) => (
<>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
className={classes.radioGroup}
value={value}
onChange={handleChange}
key={radiooption.secondaryRadioName}
>
<FormControlLabel className={classes.radioButton} value= 
{radiooption?.secondaryRadioName} control={<Radio />} label={<span 
dangerouslySetInnerHTML={{ __html: radiooption?.secondaryRadioName }}/>} 
/>
</RadioGroup>
</>
))}

2

Answers


  1. According to the API, you can utilize its checkedIcon prop, so the Radio component should looks like this

    <Radio checkedIcon={<CheckCircleIcon />} />
    

    Link to the checkedIcon props info: https://mui.com/material-ui/api/radio/#Radio-prop-checkedIcon

    CodeSandbox working demo (see line 20): https://codesandbox.io/s/bold-cloud-xhylt5?file=/Demo.tsx:718-761

    Login or Signup to reply.
  2. => You need to add checkedIcon property in the control this way:

    Sample Code: https://codesandbox.io/s/brave-einstein-cgqfrk?file=/Demo.js

    Let me know, if you have any doubt. Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search