HTML + CSS fails on center alignment of mat-icon - html

Question

Problem: my generated columns doesn't center align my mat-icon.
What am I missing?
On ngFor my datatable columns are generated dynamically, but no one's align correctly.
Inside my DIV there's a mat-icon that's (by default) apply for left alignment.
HTML Code:
<div *ngFor="let col of colunas">
<ngx-datatable-column [name]="col.ds_titulo_coluna" *ngIf="col.fl_exibe_coluna">
<ng-template let-row="row" ngx-datatable-cell-template>
<div *ngIf="row[col.id] === 'pend'">
<div class="v-align-middle">
<mat-icon class="warning">info</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'rep'">
<div class="v-align-middle">
<mat-icon class="red-fg">report_off</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'ok'">
<div class="v-align-middle">
<mat-icon class="green-fg">check_circle</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'ag'">
<div class="v-align-middle">
<mat-icon class="orange-fg">schedule</mat-icon>
</div>
</div>
</ng-template>
</ngx-datatable-column>
</div>
SCSS Code:
.ngx-datatable-column.text-center
{
display: flex !important;
align-items: center !important;
margin-left: 10px;
}
.warning{
color: #dec71b;
}
.v-align-middle {
vertical-align: middle;
}
Result of code:

Answer 1

Replace .v-align-middle CSS rules as per below. Hope this will be worked for you.
.v-align-middle {
display: flex;
justify-content: center;
align-items: center;
}