How to increase the size of PrimeNg loadingIcon

Question

In the PrimeNg Turbotable I use loadingIcon to display the spinner while loading data. I am not able to increase the size of primeIcon pi-spinner.

HTML Code:

<p-table #resdt exportFilename="RecordChange"  [value]="recordList"  
      [(selection)]="selectedRecord" [loadingIcon]="loadingIcon" 
      [loading]="loading" sortField="recordCURD" sortMode="single" 
      [autoLayout]="true" scrollable="true" scrollHeight="550px">
....
</p-table>

TypeScript Code:

this.loadingIcon = 'pi pi-spin pi-spinner';

Answer 1

you just need to update the wrapper class for the loading element like this

style.css

.ui-table .ui-table-loading-icon {
    font-size: 5em !important;
}

or as we can set the icon class ,so this can be simply done by create a new class to increase the font size

.loading-icon-size { 
  font-size: 5em !important;
 }

template

<p-table .... [loading]="loading" loadingIcon="
    pi pi-spin pi-spinner loading-icon-size ">
 .....
</table> 

demo 🚀🚀