How to style the PrimeNg dropdown icon

Question

I am trying to style PrimeNg's dropdown icon.

https://www.primefaces.org/primeng/#/dropdown

Here is how it currently looks and what I'm trying to get it to look like.

I'm guessing I have to style the

ui-dropdown-trigger

but I'm not sure what to set it to.

I tried background-color but that didn't work.

Another thing I tried was to just set it as an attribute like:

<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>

Any ideas?

Edit:

This is how I got the desired output:

1. Turned off encapsulation (reference)

2. Added the following code to the css:

   body .ui-dropdown .ui-dropdown-trigger { background-color: #2399E5; color: white; }

Answer 1

To change the dropdownicon property itself, you need to do 2 things:

1)You will need to create a var in the component.ts in which you will put the string of the icon you want. But you will have to add 'fa fa-fw' at the begining of the string. For example, if you want to put a 'fa-star', the complete string will be 'fa fa-fw fa-star'

export class AppComponent {
  star = 'fa fa-fw fa-star';
  constructor(){}
}

2)In the component.html, you have to add [dropdownIcon]=var

<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>

And the result will look like https://i.stack.imgur.com/WZDVx.png

Answer 2

You can set it as an attribute using:

<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>

or you can style the ui-dropdown-trigger but, you would have to do it in the global style sheet, not the component's.

To style ui-dropdown-trigger inside the component's css file you would have to use

:host >>> .ui-dropdown-trigger {...}

but, this has been deprecated.

Answer 3

I use included bootstrap theme from primeng. So I have to adapt:

body .ui-dropdown .ui-dropdown-trigger {
    background-color: blue;
}

in the CSS to colorize the trigger in the theme.