I am trying to change the default caret icon to dots (something like the below image) in dropdown. I tried with ::after but it didn't work.

library(bslib)
library(shiny)

ui <- function(request) { 
  
  bootstrapPage(
    navbarPage(
      id = "dir",
      theme = bs_theme(
        version = 3,
        bootswatch = "yeti"
      ),
      title = "Mobile Testing", 
      windowTitle = "Mobile Testing", 
      collapsible = TRUE,
      
      header =  tags$head(tagList(tags$style(HTML('

.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    cursor: pointer;
    background: darkslategrey;
    color: #fff;
}

.selectize-input::after{background-color:#fff;height:15px;mask-image:url(assets/icons/dots.svg);width:15px;-webkit-mask-image:url(assets/icons/dots.s
vg)}                                                  
                                                  '
      ))
      )),
      
      ## First navbarMenu
      navbarMenu(
        title = "Menu #1", 
        tabPanel(title = "Tab 1", 
                 selectizeInput("variable", "Variable:",
                                c("Cylinders" = "cyl",
                                  "Transmission" = "am",
                                  "Gears" = "gear"),
                                multiple = FALSE,
                                options = list(
                                  readOnly = TRUE, 
                                  onDelete = I("function() { return false }")
                                ))
                 )
    )
  ) )
  
}

server <- shinyServer(function(input, output, session) { 
  ## empty server
})

shiny::shinyApp(ui, server)

SVG Path of dots

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="fill: #343434">
    <path d="M50 80a6.982 6.982 0 01-4.95-2.05L2.05 34.952a7.003 7.003 0 119.904-9.904L50 63.095l38.045-38.046a7.003 7.003 0 019.903 0 7 7 0 010 9.904L54.95 77.951A6.982 6.982 0 0150 80z"/>
</svg>

CodePudding user response：

A few details

1. Your svg is not dots but arrows, here is a correct svg example

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-h" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-ellipsis-h fa-w-16 fa-2x"><path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z" class=""></path></svg>

2. Please addResourcePath if you want to use any local resources if the files are not inside the www folder of current working directory. My code below uses the current working directory and I set the prefix to myfiles. addResourcePath("myfiles", "./"), in your case, set addResourcePath("your_prefix", "./assets/icons").
3. Some problems in your CSS, I fixed.

library(bslib)
library(shiny)
addResourcePath("myfiles", "./")
ui <- function(request) { 
    
    bootstrapPage(
        navbarPage(
            id = "dir",
            theme = bs_theme(
                version = 3,
                bootswatch = "yeti"
            ),
            title = "Mobile Testing", 
            windowTitle = "Mobile Testing", 
            collapsible = TRUE,
            
            header =  tags$head(tagList(tags$style(HTML('

            .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
                cursor: pointer;
                background: darkslategrey;
                color: #fff;
            }

            .selectize-control.single .selectize-input:after {
                height:15px;
                width:15px;
                content:url(myfiles/dots.svg);
                border: none;
            }                                                  
            '
            ))
            )),

## First navbarMenu
navbarMenu(
    title = "Menu #1", 
    tabPanel(title = "Tab 1", 
             selectizeInput("variable", "Variable:",
                            c("Cylinders" = "cyl",
                              "Transmission" = "am",
                              "Gears" = "gear"),
                            multiple = FALSE,
                            options = list(
                                readOnly = TRUE, 
                                onDelete = I("function() { return false }")
                            ))
    )
)
        ) )
    
}

server <- shinyServer(function(input, output, session) { 
    ## empty server
})

shiny::shinyApp(ui, server)