Skip to contents

Create an icon

Source: R/bootstrap.R
icon.Rd

Create an icon for use within a page. Icons can appear on their own, inside of a button, and/or used with tabPanel() and navbarMenu().

Usage

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

Arguments

name

The name of the icon. A name from either Font Awesome (when lib="font-awesome") or Bootstrap Glyphicons (when lib="glyphicon") may be provided. Note that the "fa-" and "glyphicon-" prefixes should not appear in name (i.e., the "fa-calendar" icon should be referred to as "calendar"). A name of NULL may also be provided to get a raw <i> tag with no library attached to it.

class

Additional classes to customize the style of an icon (see the usage examples for details on supported styles).

lib

The icon library to use. Either "font-awesome" or "glyphicon".

...

Arguments passed to the <i> tag of htmltools::tags.

Value

An <i> (icon) HTML tag.

See also

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

Examples

# add an icon to a submit button
submitButton("Update View", icon = icon("redo"))
#> <div>
#>   <button type="submit" class="btn btn-primary shiny-submit-button">
#>     <i class="fas fa-arrow-rotate-right" role="presentation" aria-label="arrow-rotate-right 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"))
)
#> The `name` provided ('bar-chart-o') does not correspond to a known icon
#> <body class="bslib-page-navbar">
#>   <nav class="navbar navbar-default navbar-static-top" role="navigation" data-bs-theme="light">
#>     <div class="container-fluid">
#>       <div class="navbar-header">
#>         <span class="navbar-brand">App Title</span>
#>       </div>
#>       <ul class="nav navbar-nav nav-underline" data-tabsetid="4440">
#>         <li class="active">
#>           <a href="#tab-4440-1" data-toggle="tab" data-bs-toggle="tab" data-value="Plot">
#>             <i aria-label="bar-chart-o icon" class="far fa-bar-chart-o fa-fw" role="presentation"></i>
#>             Plot
#>           </a>
#>         </li>
#>         <li>
#>           <a href="#tab-4440-2" data-toggle="tab" data-bs-toggle="tab" data-value="Summary">
#>             <i aria-label="rectangle-list icon" class="far fa-rectangle-list fa-fw" role="presentation"></i>
#>             Summary
#>           </a>
#>         </li>
#>         <li>
#>           <a href="#tab-4440-3" data-toggle="tab" data-bs-toggle="tab" data-value="Table">
#>             <i aria-label="table icon" class="fas fa-table fa-fw" role="presentation"></i>
#>             Table
#>           </a>
#>         </li>
#>       </ul>
#>     </div>
#>   </nav>
#>   <div class="container-fluid">
#>     <div class="tab-content" data-tabsetid="4440">
#>       <div class="tab-pane active" data-icon-class="far fa-bar-chart-o fa-fw" data-value="Plot" id="tab-4440-1"></div>
#>       <div class="tab-pane" data-value="Summary" data-icon-class="far fa-rectangle-list fa-fw" id="tab-4440-2"></div>
#>       <div class="tab-pane" data-value="Table" data-icon-class="fas fa-table fa-fw" id="tab-4440-3"></div>
#>     </div>
#>   </div>
#> </body>