Question

我一直在尝试更改primeNG默认提供的图标。我已经接近了，但是有些东西我没得到。

我在我的component.ts文件中创建了一个带有字体真棒图标值的var。在模板中，我为属性[dropdownIcon]分配了var的值。当我在浏览器中检查时，显示一个空的正方形。调试我已经看到，如果我取消选中.ui-dropdown-trigger-icon：之前的属性“内容”，则可以正确显示图标，但是我不知道如何在代码中删除它。

如果可能的话，我想知道如何去除盒子的边框，我已经尝试过了，但是没有任何效果。

header.component.ts

card="fas fa-id-card fa-lg";

header.component.html

<p-dropdown [dropdownIcon]="card" [options]="products" [(ngModel)]="selectedProduct" optionLabel="label" placeholder="Registro"></p-dropdown>

header.component.scss

我尝试了（未显示任何内容），但未成功

:host {
  ::ng-deep .ui-dropdown-trigger-icon:before{
    content: "";
  }
}

调试捕获：

Now How get's displayed Result of the unckeck

Answer 1

您可以尝试以下方法：

.fa-id-card:before {
    content: "\f2c2" !important;
}

要删除框边框，请在p下拉列表中添加属性：

[style]="{'border': 'none'}"

这是demo

如何更改PrimeNG-Dropdown的图标

1 个答案: