Question: 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

[![enter image description here](https://i.stack.imgur.com/33wPk.png)](https://i.stack.imgur.com/33wPk.png)

desired

[![enter image description here](https://i.stack.imgur.com/AGfoT.png)](https://i.stack.imgur.com/AGfoT.png)

Answer: 
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>

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