In Shiny bs4Dash Sidebar collapsing but images are icons menu are not displayed

When I collapse the sidebar the icons of each tabItems menu the icons are no longer visible.

How can I change the css to show the image/img/icons when the sidebar is collapsed?

library(bs4Dash)
library(shiny)
library(purrr)

 ui <- dashboardPage(
    header = dashboardHeader(
      title = dashboardBrand(
        title = "My dashboard",
        color = "primary",
        # href = "https://adminlte.io/themes/v3",
        image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
      )
    ),

    sidebar = dashboardSidebar(
      bs4Dash::sidebarMenu(id = "sidebarMenu",

                           map2(
                             c(
                               'Africa',
                               'Americas',
                               'Asia',
                               'Europe',
                               'Oceania'
                             ),
                             1:5,
                             ~
                               bs4Dash::menuItem(
                                 text = p(
                                   class = 'p_sidebar_country',
                                   tags$img(
                                     src ="https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png",
                                     width = '18px',
                                     height = '18px',
                                     style = 'margin-right: .25em;'
                                   ),
                                   paste0(.x)
                                 ),
                                 tabName = paste0('panel_', .y)
                               )
                           ))

    ),

    body = dashboardBody(),

    controlbar = dashboardControlbar(),
    title = "DashboardPage"
  )
  server <- function(input, output) { }


shinyApp(ui, server)

I think I ca use css or even an argument of dashboardSidebar() to make the icons visible when the sidebar is collapsed, but how do I do that?

not Collapsed:

Collapsed:

I want the icons to appear in the collapsed sidebar.

The easiest solution is just use the icon parameter which uses font awesome or glyphicon to add icons, but the options are limited.

library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(
    title = dashboardBrand(
      title = "My dashboard",
      color = "primary",
      # href = "https://adminlte.io/themes/v3",
      image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
    )
  ),
  
  sidebar = dashboardSidebar(
    bs4Dash::sidebarMenu(id = "sidebarMenu",
                         
                         map2(
                           c(
                             'Africa',
                             'Americas',
                             'Asia',
                             'Europe',
                             'Oceania'
                           ),
                           1:5,
                           ~
                             bs4Dash::menuItem(
                               icon = icon("a"),
                               text = .x,
                               tabName = paste0('panel_', .y)
                             )
                         ))
    
  ),
  
  body = dashboardBody(),
  
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)
server <- function(input, output) { }
shinyApp(ui, server)

To use the custom image and have it show up when collapsing, using a shiny row would work and be much easier than building custom CSS:

library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(
    title = dashboardBrand(
      title = "My dashboard",
      color = "primary",
      # href = "https://adminlte.io/themes/v3",
      image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
    )
  ),
  
  sidebar = dashboardSidebar(
    bs4Dash::sidebarMenu(id = "sidebarMenu",
                         
                         map2(
                           c(
                             'Africa',
                             'Americas',
                             'Asia',
                             'Europe',
                             'Oceania'
                           ),
                           1:5,
                           ~
                             bs4Dash::menuItem(
                               text = 
                                 shiny::fillRow(
                                   tags$img(
                                     src ="https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png",
                                     width = '18px',
                                     height = '18px',
                                     style = 'margin-right: .25em;'
                                   ),
                                   tags$p(
                                     class = 'p_sidebar_country',
                                     paste0(.x)
                                   ),
                                   flex = c(1,4),
                                   height = "18px"
                                ),
                               tabName = paste0('panel_', .y)
                             )
                         ))
    
  ),
  
  body = dashboardBody(),
  
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)
server <- function(input, output) { }
shinyApp(ui, server)