Create an icon

Create an icon for use within a page. Icons can appear on their own, inside of a button, or as an icon for a tabPanel() within a navbarPage().

icon(name, class = NULL, lib = "font-awesome", ...)

Arguments

name	Name of icon. Icons are drawn from the Font Awesome Free (currently icons from the v5.13.0 set are supported with the v4 naming convention) and Glyphicons libraries. Note that the "fa-" and "glyphicon-" prefixes should not be used in icon names (i.e. the "fa-calendar" icon should be referred to as "calendar")
class	Additional classes to customize the style of the icon (see the usage examples for details on supported styles).
lib	Icon library to use ("font-awesome" or "glyphicon")
...	Arguments passed to the <i> tag of htmltools::tags

Value

An icon element

See also

For lists of available icons, see https://fontawesome.com/icons and https://getbootstrap.com/components/#glyphicons.

Examples

# add an icon to a submit button
submitButton("Update View", icon = icon("refresh"))
#> <div>
#>   <button type="submit" class="btn btn-primary">
#>     <i class="fa fa-refresh" role="presentation" aria-label="refresh icon"></i>
#>     Update View
#>   </button>
#> </div>

navbarPage("App Title",
  tabPanel("Plot", icon = icon("bar-chart-o")),
  tabPanel("Summary", icon = icon("list-alt")),
  tabPanel("Table", icon = icon("table"))
)
#> <nav class="navbar navbar-default navbar-static-top" role="navigation">
#>   <div class="container-fluid">
#>     <div class="navbar-header">
#>       <span class="navbar-brand">App Title</span>
#>     </div>
#>     <ul class="nav navbar-nav" data-tabsetid="6493">
#>       <li class="active">
#>         <a href="#tab-6493-1" data-toggle="tab" data-value="Plot">
#>           <i class=" fa fa-bar-chart-o fa-fw" role="presentation" aria-label=" icon"></i>
#>           Plot
#>         </a>
#>       </li>
#>       <li>
#>         <a href="#tab-6493-2" data-toggle="tab" data-value="Summary">
#>           <i class=" fa fa-list-alt fa-fw" role="presentation" aria-label=" icon"></i>
#>           Summary
#>         </a>
#>       </li>
#>       <li>
#>         <a href="#tab-6493-3" data-toggle="tab" data-value="Table">
#>           <i class=" fa fa-table fa-fw" role="presentation" aria-label=" icon"></i>
#>           Table
#>         </a>
#>       </li>
#>     </ul>
#>   </div>
#> </nav>
#> <div class="container-fluid">
#>   <div class="tab-content" data-tabsetid="6493">
#>     <div class="tab-pane active" data-value="Plot" data-icon-class="fa fa-bar-chart-o" id="tab-6493-1"></div>
#>     <div class="tab-pane" data-value="Summary" data-icon-class="fa fa-list-alt" id="tab-6493-2"></div>
#>     <div class="tab-pane" data-value="Table" data-icon-class="fa fa-table" id="tab-6493-3"></div>
#>   </div>
#> </div>