How to add a closing icon in Material UI Dialog Upper right upper corner of title

Question

Want to add a close icon in the upper right corner of the title. Please help me for this. I used the material interface dialog box. evrything works fine, but I want to close the button on the top. See Attached Image.

Answer 1

Place the image icon in the header and use cssto set it correctly. Try the following:

Apply this cssto a closed image:

let closeImg = {cursor:'pointer', float:'right', marginTop: '5px', width: '20px'};

<Dialog
    modal={false}
    open={true}
    title={
            <div>
                ABC 
                <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style={closeImg}/>
            </div>
        }
>
    Hello
</Dialog>

Check the working script: https://jsfiddle.net/ve0qbgLr/