<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">
<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 *ngIf=" i===0">
<svg 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>
</div>
<div *ngIf=" i===1">
<svg 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>
</div>
<div *ngIf=" i===2 || i===3">
<svg 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>
</div>
</div>
So I need to move these icons in front of the h4 and p-tag... I tried multiple ways but couldn't do it. I tried moving the icons inside the h4 element but it doesn't work as it shows the icons below the h4 element, can anyone help me?
You can just make a container for the text and the icon that you want and define display:flex to that container in the css code.
.widgets-icons{
display:flex;
} <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">
<div class="widgets-icons">
<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>
<div *ngIf=" i===0">
<svg 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>
</div>
</div>
<div class="widgets-icons">
<p class="mb-0 text-muted text-sm overflow" placement="bottom" >
{{widget.content}}
</p>
<div *ngIf=" i===1">
<svg 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>
</div>
</div>
<div *ngIf=" i===2 || i===3">
<svg 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>
</div>
</div>I'm not sure if this is exactly what you want, so tell me if i'm wrong