'Add an Icon to NbSelect

I am using Nebular for a project and there are very many dropdowns which are used as follows:

<nb-select fullWidth placeholder="Office" formControlName="office">
  <nb-option value="Office_A">Office A</nb-option>
</nb-select>

This will look like this:

Dropdown image

I want to add a close (x) icon to this drop down next to the down chevron to look like the following:

requirement

And I want to add an onClick event to that icon.

Is there any way to do this?

Edit: I'm not necessarily looking for a method from Nebular itself. Even a workaround would do.



Solution 1:[1]

You can add an additional icon to the select via the nb-form-field component

 <nb-form-field>
      <nb-icon nbSuffix icon="alert-circle-outline"></nb-icon>
      <nb-select placeholder="Select Showcase">
        <nb-option>Reset</nb-option>
        <nb-option value="1">Option 1</nb-option>
        <nb-option value="2">Option 2</nb-option>
        <nb-option value="3">Option 3</nb-option>
      </nb-select>
  </nb-form-field>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chellappan வ