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

Haris
  • 83
  • 5

1 Answers1

0

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

Rayken
  • 121
  • 4