I want to use bootstrap 5 with DT. When using bootstrap 5, DT looks better in general, but the filters get its remove icon misplaced (see circle below filter field). In addition a “new” remove icon (X) is seen only when field is active (with cursor), in the original position of the circle icon (comparing with bootstrap 3).

I want to know if there is a way to relocate the circle icon to its original position keepping bootstrap 5, or if there is a way to manipulate the “new” remove icon, to make it permanent and also replace it with another icon.

# Load required libraries
library(shiny)
library(bslib)
library(DT)

ui <- fluidPage(
  theme = bs_theme(
    version = 5,
    bootswatch = "cosmo",
  ),

  titlePanel("Shiny App with bslib/bootstrap5 and DT"),
  mainPanel(
    DTOutput("data_table")
  )
)


server <- function(input, output) {

  data <- data.frame(
    Name = c("John", "Paul", "George", "Ringo"),
    Instrument = c("Guitar", "Bass", "Guitar", "Drums"),
    stringsAsFactors = FALSE
  )

  # Render DataTable
  output$data_table <- renderDT({
    datatable(
      data,
      filter = "top",
      options = list(
        pageLength = 5,
        autoWidth = TRUE,
        dom = "Bfrtip"
      )
    )
  })
}

shinyApp(ui = ui, server = server)