How to change the "cancel(erase)" X icon in the Guide Search input field with another one from my imported library

Question

I want the browser's native cancel icon inside the input(type="search") to be placed with my custom icon from an imported library.

it is clear that we can use that CSS to hide the browser native icon and replace it with another image, but my issue here is the icon that I wanted it to be placed is an icon imported from a library @custom-icons.

`#input::-webkit-search-cancel-button {
 -webkit-appearance: none;
 content: URL();
 cursor: pointer;
  }`