CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
JS3
JS3

Reputation: 1837

Material-ui IconButton edge properties not working

I'm trying to put the delete icon at the right side of the screen and using the edge= "end" does not work.

sandbox link: https://codesandbox.io/s/admiring-silence-vwfoe?file=/src/App.js:0-1733

These are the codes:

 <Card className={classes.root}>
    <Typography variant="h5">Announcement </Typography>
    <Grid container justify="flex-end">
      {/* <Link to="#" className={classes.link}>
        <Button>
          <AddIcon /> Add Announcement
        </Button>
      </Link> */}
    </Grid>
    <Grid container justify="flex-start">
      <Card className={classes.root}>
        <CardHeader
          title="Name of Announcement"
          action={
            <IconButton aria-lable="edit" style={{ color: "green" }}>
              <EditIcon />
            </IconButton>
          }
        />
        <CardContent>Schedule</CardContent>
        <CardActions>
          <IconButton
            aria-label="delete"
            edge="end"
            style={{ color: "#c70000 " }}
          >
            <DeleteIcon edge="end" />
          </IconButton>
        </CardActions>
      </Card>
    </Grid>
  </Card>

Upvotes: 0

Views: 1267

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11166

You could achieve this by setting CardActions's style prop justifyContent to flex-end in this way:

...
<CardActions style={{ justifyContent: "flex-end" }}> //<-- add this style 
   <IconButton
      aria-label="delete"
      edge="end"
      style={{ color: "#c70000 " }}
>
     <DeleteIcon />
   </IconButton>
</CardActions>
...

And the result is:

enter image description here

Here your codesandbox modified.

Upvotes: 1

Related Questions