CODEWITHSUNDEEP
angularprimeng
Jan69
Jan69

Reputation: 1139

PrimeNG button not displaying fa icon and label in angular2

I want to display Add and Delete button in the panel header. Below code displays button with no fa-icon and no label

<p-panel>
  <p-header>
   <div>
     Registration Form
     <button type="button" pButton icon="fa-plus" style="float:right" label="Add">
     </button>
   </div>
  </p-header>
</p-panel>

Upvotes: 9

Views: 18125

Answers (6)

Meghana
Meghana

Reputation: 1

You cannot use icon and label at the same time.Try below <button type="button" pButton icon="fa-plus" style="float:right"></button> and importing ButtonModule from primeng/button is a must

Upvotes: 0

makkasi
makkasi

Reputation: 7288

Changing from pi-close to fa-close worked for me.

Seems that there are new and old font awesome icons. They have to be used like this:

class="pi pi-xxx" or class="fa fa-xxx"

Upvotes: 0

Firman Drage
Firman Drage

Reputation: 21

if you are working with angular2/4 you'll need to add the following import to your app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Upvotes: 2

Jan69
Jan69

Reputation: 1139

After importing the BrowserAnimationsModule , primeng Buttons are displaying inside the panel.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Upvotes: 4

Nehal
Nehal

Reputation: 13307

Your code is working fine here.

Have you imported font-awesome to your application? If not, add this in your index.html within the <head></head> tag.

<head> 
...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 </head>

Also, you will need to import ButtonModule, PanelModule to your application.

import {ButtonModule, PanelModule} from 'primeng';

@NgModule({

  imports: [
    ...
    ButtonModule,
    PanelModule,
    ...
  ],
  ...
})

Upvotes: 16

BillF
BillF

Reputation: 864

You have some structure errors in your example code. I've created a plnkr for you.

http://plnkr.co/edit/myrBq9tv4iNRNd6v6bhT?p=preview

<p-panel>
  <p-header>
    <div>Registration Form
      <button type="button" pButton icon="fa-plus" style="float:right" label="Add"></button>
      <button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right" label="Delete"></button>
    </div>
  </p-header>
</p-panel>

Upvotes: 0

Related Questions