How to change the icon of a PrimeNG-Dropdown

Question

I've been trying to change the icon that primeNG provides by default. I'm close, but there is some stuff i don't get.

I've created a var in my component.ts with the value of a font-awesome icon. In the template i've asigned an attribute [dropdownIcon] with the value of the var. When i check in the browser displays an empty square. Debugging i've seen that if i uncheked the attribute 'content' of .ui-dropdown-trigger-icon:before, displays the icon properly, but i've no idea of how to remove that in my code.

If possible i would like to know to how to remove the border of the box, i've already tried but nothing worked.

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

I've tried, unsuccesfully (displays nothing)

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

The captures of the debugging:

Now How get's displayed Result of the unckeck

Answer 1

You can try this:

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

To remove box border add property to p-dropdown:

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

This is demo