<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/custom-images-for-shiny-dashboard-valuebox-icons/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://blog.snap.uaf.edu/2017/01/11/custom-images-for-shiny-dashboard-valuebox-icons/"> rbloggers – SNAP Tech</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>The <code>shinydashboard</code> package provides functions like <code>valueBox</code> 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.</p>
<p>I’ve <a target="_blank" rel="nofollow" href="https://gist.github.com/leonawicz/0fab3796b02a62b7f3bd0c02a171f0b7">provided a gist</a> that shows how to achieve the use of custom icons with local image files stored in an app’s <code>www/</code> directory. It involves overriding a couple functions in <code>shiny</code> and <code>shinydashboard</code> 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.</p>
<p><a target="_blank" rel="nofollow" href="https://i2.wp.com/uasnap.files.wordpress.com/2017/01/valueboxes1.png?ssl=1"><img alt="valueboxes1" class="wp-image-1405" src="https://i2.wp.com/uasnap.files.wordpress.com/2017/01/valueboxes1.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<p><span></span></p>
<p>The gist above includes the <code>app.R</code> file to run the <a target="_blank" rel="nofollow" href="https://uasnap.shinyapps.io/customiconsdemo/">Custom Icons Shiny app demo</a> and the <code>override.R</code> file which I have it <code>source</code> separately. The gist also includes an <code>icons.R</code> 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 <code>www/</code> folder. The live app demo contains them already.</p>
<p>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 <code>app.R</code> adds some custom CSS; it is not sufficient to override the definitions of <code>icon</code> and <code>valueBox</code> alone. I placed it inline for to reduce the number of required files, but it could alternatively be loaded from a file using <code>includeCSS</code>.</p>
<p>This overriding functionality is only for <code>valueBox</code> widgets and the way in which a local image file is passed to <code>icon</code> is with a named list where the available names are <code>src</code> (required, image file name) and <code>width</code> (optional, defaults to <code>'100%'</code>). It is restrictive but demonstrates potential to use image files in place of icon library options without too much code refactoring.</p>
<p><img alt="" src="https://i1.wp.com/pixel.wp.com/b.gif?resize=1%2C1&ssl=1" border="0" data-recalc-dims="1"></p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://blog.snap.uaf.edu/2017/01/11/custom-images-for-shiny-dashboard-valuebox-icons/"> rbloggers – SNAP Tech</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/wZT5Vs2-9vM"></a></div>