CODEWITHSUNDEEP
htmlcssangularprimeng
Sunil Bishnoi
Sunil Bishnoi

Reputation: 589

Can i add icon to primeng button?

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

Upvotes: 7

Views: 26640

Answers (2)

Ajay.k
Ajay.k

Reputation: 121

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

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86730

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 -

Upvotes: 8

Related Questions