如何更改PrimeNG-Dropdown的图标

Question

我一直在尝试更改 primeNG 默认提供的图标。我很接近，但有些东西我不明白。

我在 component.ts 中创建了一个变量，其值为 font-awesome 图标。在模板中，我用 var 的值分配了一个属性 [dropdownIcon]。当我签入时，浏览器显示一个空方块。调试我已经看到，如果我取消选中 .ui-dropdown-trigger-icon:before 的属性 'content'，则会正确显示图标，但我不知道如何在我的代码中删除它。

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

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

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

这是demo

如何更改PrimeNG-Dropdown的图标

How to change the icon of a PrimeNG-Dropdown

icons

font-awesome

primeng

angular7

primeng-dropdowns