I want to design a layout where an icon floats beside some text, just like how an image would align within a block of text. The text should wrap around the icon smoothly, and if it goes onto a new line, it should start directly below the first line of text instead of next to the icon.
Here is my desired outcome: https://i.sstatic.net/Sq0MB.png
However, this is what I currently have: https://i.sstatic.net/tD27J.png
Below is the code snippet I am using:
<div style={{width:"100%"}}>
<IconButtonMUI
onClick={() => {
window.open(url, '_blank');
}}
size='small'
style={{float:"left"}}
>
<Iconify
width={16}
icon="solar:map-arrow-up-bold"
/>
</IconButtonMUI>
<Stack
direction="row"
alignItems="center"
style={{float:"none", textAlign: 'justify'}}
sx={{
typography: 'h6',
}}
>
{marker.placeName}
</Stack>
</div>
Thank you in advance!