如何使用 PrimeNG 删除手风琴面板标题上的箭头图标？

Question

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:

Answer 1

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.

Answer 2

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