How to customize clear button in ng-select?

Question

The Ng-select component has a clear button. Is there a way to use an SVG image instead of default 'x' character?

Screenshot :

Answer 1

I've found another way of doing this, but in CSS. You can add class 'custom' to ng-select and change its styling like this:

<ng-select class="custom"></ng-select>

/* Hide default cross */
.ng-select.custom .ng-clear-wrapper .ng-clear {
  font-size: 0;
}

/* Display our image */
.ng-select.custom .ng-clear-wrapper .ng-clear::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('path/to/svg');
}

P.S: if you're using view encapsulation, your styles won't be applied to ng-select. To avoid this, add encapsulation: ViewEncapsulation.None to component metadata.