Can i add icon to primeng button?

Question

i have been trying to add icon from http://seehowsupport.com/font-awesome/ website to my p-button.

<div class="ui-g-12">
    <button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>

here, in place of '+' in label, i wish to set icon from above url. I have heard changing some content attribute in css to \f067 can do it but m not sure how to. Thanks

Answer 1

Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.

Here are two ways by which you can add icons to primeng Button.

<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>

working Example

For more read on documentation -

• https://primefaces.org/primeng/#/button

Answer 2

Use This way where it shows in their documentation and it works.

<div class="ui-g-12">
    <button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>

Link for How to use it https://fontawesome.com/how-to-use/svg-with-js