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

Issue

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:

Solution

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.

Answered By – Chau Tran

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0