CODEWITHSUNDEEP
cssangularimagetypescriptprimeng
HenryDev
HenryDev

Reputation: 4993

How to remove arrow icon on accordion panel headers using PrimeNG?

I just want to remove arrow icons from accordion panel headers using PrimeNG. Does anyone know how to accomplish this?

Code:

<p-accordion>
  <p-accordionTab header="Godfather I">
   Content 1
 </p-accordionTab>
 <p-accordionTab header="Godfather II">
    Content 2
 </p-accordionTab>
 <p-accordionTab header="Godfather III">
    Content 3    
 </p-accordionTab>

Here's an image: enter image description here

Upvotes: 7

Views: 10754

Answers (2)

Mayank Gangwal
Mayank Gangwal

Reputation: 571

There's a property in PrimeNG, that allows us to manipulate the icons for accordion.

expandIcon and collapseIcon: to be used on <p-accordion> tag.

We may use something like <p-accordion expandIcon = "" collapseIcon= ""> and this should work like a charm.

Similarly, this could be used when we want to change the icons, as per our needs, say "+" or "-".

<p-accordion expandIcon = "pi pi-plus" collapseIcon = "pi pi-minus">

More info on https://www.primefaces.org/primeng/showcase/#/accordion

Peace

Upvotes: 5

Chau Tran
Chau Tran

Reputation: 5108

Give your p-accordion a styleClass="someStyleClass" then go to your root styles and add these:

.someStyleClass.ui-accordion .ui-accordion-header span.fa {
  display: none;
}

or if you use SCSS

.someStyleClass.ui-accordion {
  .ui-accordion-header {
    span.fa {
      display: none;
    }
  }
}

EDIT: This is the simplest solution that I personally can think of that is not messing with the source code.

Upvotes: 5

Related Questions