-2

My requirement is to change primeng dropdown icon mouse over.

This is the actual dropdown icon

enter image description here

On the mouse over i need to change icon to this

enter image description here

I have added below style .

.pi-chevron-down:hover{
   color: mediumslateblue;
 }

This style will change the colour of the icon How can i override the existing icon image.

Please help me on this.

Thanks in advance.

arj
  • 887
  • 1
  • 15
  • 37

1 Answers1

0

According to the documentation, there's an available property dropdownIcon that you can change. Something like:

<p-dropdown [dropdownIcon]="pi pi-check" [options]="cities"></p-dropdown>

Still keep in mind that you will probably have to use one of the icons they provide.

Edit 1. Sorry, missed the point of the hover requirement.

Edit 2. Here's a working solution taking into account the hover requirement :)
Essentially you just need to override the .pi-chevron-down:before selector using one of the icons they provide.

:host ::ng-deep {
  .p-dropdown:hover .pi-chevron-down:before {
    content: '\e987';
    color: red;
  }
}

Here's a working blitz: https://stackblitz.com/edit/primeng-dropdown-demo-vtagou

WSD
  • 3,243
  • 26
  • 38