After thorough research, I have come to seek help with an issue in my angular project. I am using ng-select and attempting to replace the default dropdown icon with one from font-awesome.
To integrate font-awesome into my project, I followed these steps:
ng add @fortawesome/angular-fontawesome
npm install @fortawesome/free-solid-svg-icons
In my CSS, I tried to change the ng-select dropdown icon using the following code:
.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow {
display: none;
}
.ng-select ::ng-deep span.ng-arrow-wrapper::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f078';
}
The result is shown below
https://i.sstatic.net/rhCEU.png
I welcome any suggestions or insights. You can view my StackBlitz here: https://stackblitz.com/edit/angular-yrhnot?file=src/app/app.component.css