<p-fileUpload> Change icon on PrimeNG on file upload

1
votes

Is it possible to change the icon on choose button on file upload ? In my case it is always "+".

<p-fileUpload 
  class="btn-primary"
  auto="true"
  mode="basic"
  name="demo[]" 
  chooseLabel="Upload"
  [url]="apiImageLocation" 
  accept="image/*"
  maxFileSize="2000000" 
  (onUpload)="onUploadImageSuccess($event)" 
  (onError)="onUploadImageError($event)">
</p-fileUpload>
2
angularprimeng

2 Answers

2
votes

You can override font awesome plus icon in the CSS of your component :

::ng-deep .ui-fileupload-choose .fa-plus::before {
  content: "\F0A6";
}

See StackBlitz

0
votes
::ng-deep .ui-fileupload-choose .fa-plus::before {
  content: "\F0A6";
   background: red;
}

::ng-deep .ui-button .fa-upload::before{
  background: red;
   content: "\F0A6";

}

::ng-deep .ui-button .fa-close::before{
  background: red;
   content: "\F0A6";

}


but new primeng pi-upload,pi-times