将文本环绕在图标周围

Question

我正在尝试创建一个布局，其中图标浮动到某些文本的左侧，类似于图像在文本块中的对齐方式。我希望文本环绕图标，并且当它溢出到新行时，它应该直接从第一行文本下方开始，而不是在图标旁边。

这就是我想要实现的目标：

这是我目前拥有的：

这是我的代码：

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

提前致谢！

Answer 1

从

<IconButtonMUI />

和

<Stack />

中删除当前样式。

您只需要

style={{display: 'inline'}}

组件上的

<Stack />

。

查看 CodeSandbox 上的工作示例