How do I add an image to shinydashboard menuItem()s?

Question

In essence, I would like to replace the icon in each menuItem() in a shinydashboard with an image. More specifically, I just need each menuItem() to have an image then text next to it.

Here's some moderately successful attempts I have tried (commented in code below) ;

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
 dashboardHeader(title = "Dashboard MenuItems"),
 dashboardSidebar(
   sidebarMenu(
     id = "tabs",
     menuItem(
       "Dashboard", 
       tabName = "dashboard",
       ## creates a drop down w/ no image
       # label = img(src = "logo.png",
       #             title = "logo", height = "35pt") 

       ## creates a drop down with the images
       # `tag$` isn't needed
       # tags$img(src = "logo.png",
       #     title = "logo", height = "35pt")
     ),
     menuItem(
       "Not Dashboard",
       tabname = "not_dashboard"
     )
   ) # end sidebarMenu
 ), # end dashboardSidebar
 dashboardBody(
   fluidRow(
     box(
       title = "stuff goes here",
       width = 12
     )
   )
 ) # end dashboardBody
)

server <- function(input, output, session) {
  message("You can do it!")
}

shinyApp(ui, server)

I successfully used action buttons with background images to simulate the behavior, but I would prefer to find a solution using menuItem() s, if possible.

I was hoping there would be a similar method to add the image to the background of the menuItem() or concatenate the image with the text within the menuItem() .

I am not good with shiny tags. I don't really know much about HTML/CSS/JS or Bootstrap, most of the time I can find a solution here and hack my way to what I want, but this one has eluded me.

Any ideas?

Answer 1

You can keep your images in the www folder and use a div to wrap the image along with the text as shown below.

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard MenuItems"),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem( div(tags$img(src = "YBS.png", width="20px"), "Dashboard2"),
        tabName = "dashboard" # , icon=icon("b_icon") 
      ),
      menuItem( 
        div(tags$img(src = "mouse.png", width="35px"),"Not Dashboard"),
        tabname = "not_dashboard" #, icon=icon("home")
      )
    ) # end sidebarMenu
  ), # end dashboardSidebar
  dashboardBody(
    fluidRow(
      box(
        title = "stuff goes here",
        width = 12
      )
    )
  ) # end dashboardBody
)

server <- function(input, output, session) {
  message("You can do it!")
}

shinyApp(ui, server)