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

【问题标题】：How to remove arrow icon on accordion panel headers using PrimeNG?如何使用 PrimeNG 删除手风琴面板标题上的箭头图标？
【发布时间】：2018-06-13 10:16:19
【问题描述】：

我只想使用PrimeNG 从手风琴面板标题中删除箭头图标。有谁知道如何做到这一点？

代码：

<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>

这是一张图片：

【问题讨论】：

源代码具有硬编码，因此您可以提交拉取请求或修改源代码以适应您的情况。编辑：我提交了可自定义图标的 PR，但尚未合并。
@ChauTran 你会建议一种简单的方法来删除这些图标吗？谢谢

标签： css angular image typescript primeng

【解决方案1】：

给你的p-accordion 一个styleClass="someStyleClass" 然后去你的根styles 并添加这些：

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

或者如果你使用SCSS

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

编辑：这是我个人能想到的最简单的解决方案，不会弄乱源代码。

【讨论】：

【解决方案2】：

PrimeNG 中有一个属性，允许我们操作手风琴的图标。

expandIcon 和collapseIcon：用于<p-accordion> 标签。

我们可以使用 <p-accordion expandIcon = "" collapseIcon= ""> 之类的东西，这应该像一个魅力。

同样，当我们想根据需要更改图标时，可以使用它，比如“+”或“-”。

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

和平

【讨论】：