Angular组件中如何将SVG图标移至h4与p标签前方？

要让SVG图标显示在h4和p标签前方（横向排列或上方），核心是调整HTML结构并修复布局样式，以下是修改后的完整代码及说明：

修改后的代码 #

<div class="row p-4">
    <!-- [ sample-page ] start -->
    <div class="col-md-6 col-xl-3" *ngFor="let widget of widgets;let i = index">
      <div class="card  {{ widget.background }} border {{ widget.border }} h-{{widget.height}}">
        <div class="card-body p-3 mt-0 d-flex align-items-center">
          <!-- 图标区域移至最前方 -->
          <div class="me-3">
            <svg *ngIf="i===0" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-check" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M3.5 5.5l1.5 1.5l2.5 -2.5" />
              <path d="M3.5 11.5l1.5 1.5l2.5 -2.5" />
              <path d="M3.5 17.5l1.5 1.5l2.5 -2.5" />
              <line x1="11" y1="6" x2="20" y2="6" />
              <line x1="11" y1="12" x2="20" y2="12" />
              <line x1="11" y1="18" x2="20" y2="18" />
            </svg>
            <svg *ngIf="i===1" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <circle cx="12" cy="12" r="9" />
              <polyline points="12 7 12 12 15 15" />
            </svg>
            <svg *ngIf="i===2 || i===3" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M12 9v2m0 4v.01" />
              <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
            </svg>
          </div>
          <!-- 文本内容区域 -->
          <div class="flex-grow-1">
            <h4 class="mb-0" [ngClass]="{'text-danger':i>1,'text-primary':i===1}">
              {{ widget.amount }}
              <!-- <span class="badge {{ task.background }} border {{ task.border }} "><i class="{{ task.icon }}"></i> {{ task.percentage }}</span> -->
            </h4>
            <p class="mb-0 text-muted text-sm overflow" placement="bottom" >
              {{widget.content}}
            </p>
          </div>
        </div>
      </div>
    </div>
</div>

关键修改说明 #

1. 结构调整：

   • 把原本在h4、p标签后的SVG图标区域直接移到最前方，同时简化了结构——将多个*ngIf的容器div合并，直接给SVG标签加*ngIf判断，减少冗余嵌套。

2. 布局修复：

   • 给card-body添加d-flex align-items-center（Bootstrap flex布局类），让内部图标和文本横向排列并垂直居中，解决了之前图标被挤到下方的问题。
   • 图标容器添加me-3类，设置图标与文本之间的间距，提升视觉舒适度。
   • 文本区域添加flex-grow-1类，让文本部分自动占满剩余空间，避免布局错乱。

你之前把图标放入h4仍显示在下方，是因为h4是块级元素，默认独占一行，SVG未设置行内属性时也会被当作块级元素，自然会换行显示。用flex布局可以彻底解决这个排版问题。

内容的提问来源于stack exchange，提问作者Haris