Issue with using icon in searchPlaceholder

samuelbojko

When using an <i> tag with an icon as placeholder, either the input field disappears or the tag itself is rendered as text in the field.

What I'm using:

 $('#example').DataTable( { "language": {
    search: '',
    searchPlaceholder: '<i class="bx bx-search aria-hidden="true"></i>'
} 

I also used this JS (I don't know if it's relevant) to put the search field outside of the datatables body:

$(document).ready(function() {
    // Move the search field to a new location (e.g., with ID "searchContainer")
    $('#searchContainer').append($('.dataTables_filter'));
  });

EDIT: In search: '', the icon can render just fine.

kthorngren

See this thread. I adapted one of the SO examples here:
https://live.datatables.net/bimaloyo/1/edit

Kevin