<p-fileUpload>在文件上传时更改 PrimeNG 上的图标

Question

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>

Answer 1

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

Answer 2

::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

Answer 3

You can now set the icons with attributes:

<p-fileUpload chooseIcon="pi pi-upload" uploadIcon="pi pi-arrow-up" cancelIcon="pi pi-stop></p-fileUpload>

No longer any need for css overrides for this.