PrimgNg Dropdown - Show icon and text in placeholder

Question

So what I am trying to achieve is very simple. Have an icon along with text. Below is what I want to achieve. I am using PrimeNg library in my Angular application.

Dependencies

"@angular/cdk": "^11.1.0",
"@angular/common": "~11.0.5",
"@angular/compiler": "~11.0.5",
"@angular/core": "~11.0.5",
"primeng": "^11.2.0",

Below is my code which is pretty straightforward.

<p-dropdown
  class="my-student-selector"
  [options]="filters"
  optionLabel="label"
  placeholder="Filtres"
>
</p-dropdown>

Things I have tried.

1. Used CSS before/after selector to add the icon. But there seems to be spacing issue which I tried to fix via content but I guess I am missing something.

.p-placeholder::before {
      background: url("/assets/images/icons/filter_icon.png");
      // content: "''";
      content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0";
      height: 16px; /*height of image*/
      width: 14px;
      position: absolute;
      background-size: 16px 14px;
      background-repeat: no-repeat;
      padding-right: 5px;
    }

2. Used html directly in the placeholder attribute but as expected it just renders the html as string.

<p-dropdown
  class="my-student-selector"
  [options]="filters"
  optionLabel="label"
  placeholder="<span>Filtre</span>"
>
</p-dropdown>

3. Used a variable to render the HTMl but same output. It renders HTML as string.

<p-dropdown
  class="my-student-selector"
  [options]="filters"
  optionLabel="label"
  [placeholder]="placeholder"
>
</p-dropdown>


placeholder = '<span style="color: gray">Select an option</span>';

4. Used pTemplate="placeholder" attribute inside the p-dropdown but I guess I am not using it write because this renders the option instead on placeholder

<p-dropdown
  class="my-student-selector"
  [options]="filters"
  optionLabel="label"
>
<ng-template pTemplate="placeholder">
  <span style="color: gray">Select an option</span>
</ng-template>
</p-dropdown>

Maybe I am not using the library correctly? Or missing some documentation.

Answer 1

Remove the absolute positioning and add placeholder filters as follows. This modification works perfectly for me.

1. template :

<p-dropdown  class="my-student-selector"
  [options]="filters" optionLabel="label" placeholder="Filtres">
</p-dropdown>

2. SCSS:

:host ::ng-deep .p-placeholder::before {
  content: '\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0';
  background-image: url('https://picsum.photos/200');
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

To add an icon to a specific dropdown, simply include the styleClass property in the dropdown component and assign a CSS class to it.

1. Template:

<p-dropdown  class="my-student-selector"
  [options]="filters" styleClass="your-class" optionLabel="label" placeholder="Filtres">
</p-dropdown>

2. SCSS:

:host ::ng-deep .your-class .p-placeholder::before {
 content: '\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0';
 background-image: url('https://picsum.photos/200');
 background-size: 20px 20px;
 background-repeat: no-repeat;
}