How to move the icon to the right?

 <Grid container justify="space-between" border="1px">  
    <Typography variant="h6" className="locationTitle" display="block">
        sample text
    </Typography>
    <LocationIcon align="right"/>
</Grid>

current

desired

CodePudding user response：

do this

    <Grid container>
      <Grid container direction="column" item xs align="left">  
          <Grid item >
            <Typography>
              sample text
            </Typography>
          </Grid>        
      </Grid>
      <Grid container direction="column" item xs align="right">  
          <Grid item >
          < LocationIcon/>
          </Grid>        
      </Grid>
    </Grid>

CodePudding user response：

Use justify-self and the value should flex-end on the icon. example: LocationIcon{justify-self: flex-end;} After the parent element display property has been set to either grid or flex.