Easily insert "buttons" with an icon and text into .Rmd documents

make_icon(icon, style = "default")

icon_link(icon = NULL, text = NULL, url = NULL, style = "default")



The name of the icon. For Font Awesome icons, the name should correspond to the current Version 5 name and can either be the the short name (e.g. "github") or the full name (e.g. "fab fa-github"). Academicons can also be used and styled the same way (e.g. "google-scholar" or "ai ai-google-scholar") but require a site header. See here for details.


The style of the font awesome icon, which can be "default", "solid" or "regular". This parameter is only used when the short name of the icon is used in the icon argument and there is more than one style available for that icon. In that case, the default becomes "solid".


A string of the text to appear on the button


A url for where the button should link to


For make_icon, a shiny.tag with the HTML <i class = "icon"></i>. For icon_link, a shiny.tag with the HTML <a href=url class="icon-link" target = "_blank" rel = "noopener"><i class=icon></i> text</a>


Note that it will be necessary to add some CSS to in order to make the "buttons" look like buttons. For the icon_link function, this can be done by styling the icon-link class. At a minimum, a border property should be set. For a distill website, we recommend using the distill::create_theme() function and writing additional CSS at the bottom of that file. See here for details of how to implement that. See here and here for examples.

The make_icon function returns an <i> tag, rather than the svg of the icon. This function is designed primarily to be called within icon_link, so we use the tag rather than the image directly to enable styling by css (in particular that the icon styling can change if hovered over). If you wish to insert an icon directly into your text or into a site header or footer, we recommend using a package that inserts the svg, such as fontawesome or icons. This ensures that the icons render offline, and there are also additional styling options available.


John Paul Helveston and Ella Kaye


#> <i class="fas fa-images"></i>
make_icon("fas fa-images")
#> <i class="fas fa-images"></i>
make_icon("far fa-images")
#> <i class="far fa-images"></i>
make_icon("images", style = "regular")
#> <i class="far fa-images"></i>
icon_link("github", "materials", "https://github.com/USER/REPO")
#> <a href="https://github.com/USER/REPO" class="icon-link" target="_blank" rel="noopener"><i class="fab fa-github"></i> materials</a>
icon_link("images", "slides", "https://USER.github.io/slides", style = "regular")
#> <a href="https://USER.github.io/slides" class="icon-link" target="_blank" rel="noopener"><i class="far fa-images"></i> slides</a>