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?


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

Here’s an image:
enter image description here


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

Leave a Reply

(*) Required, Your email will not be published