How to add close icon in Material UI Dialog Header top right corner

I know this was asked pre Material UI V1 but the accepted answer works for Material UI version 0 (or whatever they called it).

For people wanting help with version 1 the MUI guys have exposed a <DialogTitle /> component that accepts a disableTypography so you can customize your dialog.

EG

<Dialog open={this.state.show} onClose={this.onClose}>
    <DialogTitle disableTypography className={styles.dialogTitle}>
        <h2>Dialog...</h2>
        <IconButton onClick={this.onClose}>
            <CloseIcon />
        </IconButton>
    </DialogTitle>
    <DialogContent>
        <span>Dialog Content</span>
    </DialogContent>
</Dialog>

I just use flex with space between for the h2 and the Icon

.dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Hope that helps somebody out. :-)

Put the image icon in the title, and use the css to position it correctly, Try this:

Apply this css on close 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 fiddle: https://jsfiddle.net/ve0qbgLr/

For anyone looking for a solution using Material UI V4.

import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

 <DialogTitle id="id">
         <Box display="flex" alignItems="center">
                <Box flexGrow={1} >{title}</Box>
                <Box>
                    <IconButton onClick={onClose}>
                          <CloseIcon />
                    </IconButton>
                </Box>
          </Box>
  </DialogTitle>