html - 文本旁边的位置图标

Question

我创建了一个显示图标和文本的 div，但我需要将图标放在文本旁边而不是在其上方。目前看起来像这样：

而且我需要将图标放在这样的文本旁边（图标需要显示在文本的左侧而不移动文本，因此标题仍与电话号码对齐）：

代码：

    <div fxLayout="row" fxLayoutAlign="space-around center">
            <div>
                <mat-icon svgIcon="phone-outline"> </mat-icon>
                <h3>Customer Support</h3>
                <label>123456</label>
            </div>
         <div>
            <mat-icon svgIcon="email-outline"> </mat-icon>
            <h3>Email</h3>
            <label>[e-mail]</label>
        </div>
        <div>
            <mat-icon svgIcon="map-marker-outline"> </mat-icon>
            <h3>Address</h3>
            <label>address line 1</label>
        </div>
   </div>

我有三个 div 并使用 fxLayoutAlign 将它们在页面上彼此相邻对齐，但是如果我将图标放入单独的 div 中，fxLayoutAlign 会将其在页面上移动得太远。有没有更好的方法来对齐 div？

到目前为止尝试过：

1. 尝试将图标与文本放在同一行，但这会使图标离文本太近： <h3><mat-icon svgIcon="phone-outline"> </mat-icon> Customer Support</h3>

我需要在图标和文本之间留出空间并将其与文本对齐。

2. 使用 CSS 尝试对齐仍然会导致图标离文本太近（并且未正确对齐）： .align-items { display: flex; justify-content: space-between; } .align-content { display: flex; align-items: center; }

使用边距在 CSS 中移动图标看起来可以正常工作，但现在它已将第二行与电话号码一起移动：

电话号码应直接位于标题文本下方（如上面的第一个屏幕截图所示）

标签： htmlcssangularmat-icon

Answer 1

您可以使用matPrefix和matSuffix

<mat-form-field class="example-full-width">
    <mat-icon matPrefix>mode_edit</mat-icon>
    <mat-label>EXAMPLE</mat-label>
    <mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>