How can I add the close icon in the top right corner of the Material UI Dialog Header?

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.


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

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. 🙂

Leave a Comment