PrimeNg-Button : button not showing fa icon if label is not provided

Question

I want to show button with icon and without label. and i am trying with this

<button type="text" pButton icon="fa-angle-left"></button>

but it is not showing fa icon, and displaying blank button. if i try giving label, then it will show icon as well as label.

don't know if i am doing anything wrong.

Answer 1

First: Make sure to import the ButtonModule to your component module (or just AppModule) like with:

import { ButtonModule } from 'primeng';

Second: Add the ButtonModule to the imports Array like this for example:

@NgModule({
  imports:      [ BrowserModule, FormsModule, ButtonModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Finally: Create your desired button with this code:

<button pButton type="button" (click)="count()" icon="fa-angle-left"></button>

Try all that here: https://embed.plnkr.co/GEpcJG/

NB: I supposed that you have no other problems with primeng in general.

Answer 2

I've solved this problem by overwriting one parameter in css for class "ui-button-icon-only":

.ui-button-icon-only {
  text-indent: initial;
}