Custom images for Shiny dashboard valueBox icons
This article is originally published at https://blog.snap.uaf.edu
shinydashboard package provides functions like
valueBox that conveniently display basic information like summary statistics. In addition to presenting a value and subtitle on a colored background, an icon may be included as well. However, the icon must come from either the Font Awesome or Glyphicon icon libraries and cannot be image files.
I’ve provided a gist that shows how to achieve the use of custom icons with local image files stored in an app’s
www/ directory. It involves overriding a couple functions in
shinydashboard and adding a small bit of custom CSS. Ideally, functionality could be included in future versions of these two packages to allow this in a more robust and complete fashion. But for now, here is a way to do it yourself for value boxes.
The gist above includes the
app.R file to run the Custom Icons Shiny app demo and the
override.R file which I have it
source separately. The gist also includes an
icons.R script to generate some statistics and probability themed icons from R. This is interesting and fun on its own. This is not needed to run the app, but the icons are of course needed. If you build the app locally you will have to run this script to generate the images and place them in your
www/ folder. The live app demo contains them already.
I’ve included both light and dark examples using icons that can be used to generally represent a distribution, mean, standard deviation, minimum, maximum, median or interquartile range. Note that
app.R adds some custom CSS; it is not sufficient to override the definitions of
valueBox alone. I placed it inline for to reduce the number of required files, but it could alternatively be loaded from a file using
This overriding functionality is only for
valueBox widgets and the way in which a local image file is passed to
icon is with a named list where the available names are
src (required, image file name) and
width (optional, defaults to
'100%'). It is restrictive but demonstrates potential to use image files in place of icon library options without too much code refactoring.
Please visit source website for post related comments.