How to customize clear button in ng-select?

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.

Apparently this is not available yet in ng-select docs.

But you can force change it manually with another icon after the ng-select rendered.

Typescript Example :

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('ngSelect', { static: false }) public ngSelect: ElementRef;

    constructor() {
    }

    ngAfterViewInit() {
      setTimeout(() => {
        (this.ngSelect as any).element.querySelector('.ng-clear').innerHTML = '<i class="fa fa-code"></i>';
      }, 1);
    }
}

don't forget to add #ngSelect to ng-select Element :

HTML Example :

<ng-select #ngSelect>
</ng-select>