Use icons within a table's body cells

We can draw from a library of thousands of icons and selectively insert them into a gt table. The fmt_icon() function makes this possible and it operates a lot like fmt_flag() in that input cells need to contain some reference to an icon name. We are exclusively using Font Awesome icons here (and we do need to have the fontawesome package installed) so the reference is the short icon name. Multiple icons can be included per cell by separating icon names with commas (e.g., "hard-drive,clock"). The sep argument allows for a common separator to be applied between flag icons.

Usage

fmt_icon(
  data,
  columns = everything(),
  rows = everything(),
  height = "1em",
  sep = " ",
  stroke_color = NULL,
  stroke_width = NULL,
  stroke_alpha = NULL,
  fill_color = NULL,
  fill_alpha = NULL,
  vertical_adj = NULL,
  margin_left = NULL,
  margin_right = NULL,
  a11y = c("semantic", "decorative", "none")
)

Arguments

data

The gt table data object

obj:<gt_tbl> // required

This is the gt table object that is commonly created through use of the gt() function.

columns

Columns to target

<column-targeting expression> // default: everything()

Can either be a series of column names provided in c(), a vector of column indices, or a select helper function. Examples of select helper functions include starts_with(), ends_with(), contains(), matches(), one_of(), num_range(), and everything().

rows

Rows to target

<row-targeting expression> // default: everything()

In conjunction with columns, we can specify which of their rows should undergo formatting. The default everything() results in all rows in columns being formatted. Alternatively, we can supply a vector of row captions within c(), a vector of row indices, or a select helper function. Examples of select helper functions include starts_with(), ends_with(), contains(), matches(), one_of(), num_range(), and everything(). We can also use expressions to filter down to the rows we need (e.g., [colname_1] > 100 & [colname_2] < 50).

height

Height of icon

scalar<character> // default: "1em"

The absolute height of the icon in the table cell. By default, this is set to "1em".

sep

Separator between icons

scalar<character> // default: " "

In the output of icons within a body cell, sep provides the separator between each icon. By default, this is a single space character (" ").

stroke_color

Color of the icon stroke/outline

scalar<character> // default: NULL (optional)

The icon stroke is essentially the outline of the icon. The color of the stroke can be modified by applying a single color here. If not provided then the default value of "currentColor" is applied so that the stroke color matches that of the parent HTML element's color attribute.

stroke_width

Width of the icon stroke/outline

scalar<character|numeric|integer> // default: NULL (optional)

The stroke_width option allows for setting the color of the icon outline stroke. By default, the stroke width is very small at "1px" so a size adjustment here can sometimes be useful.

stroke_alpha

Transparency value for icon stroke/outline

scalar<numeric> // default: NULL (optional)

The level of transparency for the icon stroke can be controlled with a decimal value between 0 and 1.

fill_color

Color of the icon fill

scalar<character> // default: NULL (optional)

The fill color of the icon can be set with fill_color; providing a single color here will change the color of the fill but not of the icon's 'stroke' or outline (use stroke_color to modify that). If not provided then the default value of "currentColor" is applied so that the fill matches the color of the parent HTML element's color attribute.

fill_alpha

Transparency value for icon fill

scalar<numeric|integer>(0>=val>=1) // default: NULL (optional)

The level of transparency for the icon fill can be controlled with a decimal value between 0 and 1.

vertical_adj

Vertical adjustment of icon from baseline

scalar<character|numeric|integer> // default: NULL (optional)

The vertical alignment of the icon. By default, a length of "-0.125em" is used.

margin_left

Margin width left of icon

scalar<character|numeric|integer> // default: NULL (optional)

The length value for the margin that's to the left of the icon can be set with margin_left. By default, "auto" is used for this but if space is needed on the left-hand side then a length of "0.2em" is recommended as a starting point.

margin_right

Margin width right of icon

scalar<character|numeric|integer> // default: NULL (optional)

The length value for the margin that's to the right of the icon can be set with margin_right. By default, "auto" is used for this but if space is needed on the right-hand side then a length of "0.2em" is recommended as a starting point.

a11y

Accessibility mode for icon

singl-kw:[semantic|decorative|none] // default: "semantic"

The accessibility mode for the icon display can be set with the a11y argument. Icons can either be "semantic" or "decorative". Using "none" will result in no accessibility features for the icons.

Value

An object of class gt_tbl.

Compatibility of formatting function with data values

The fmt_icon() formatting function is compatible with body cells that are of the "character" or "factor" types. Any other types of body cells are ignored during formatting. This is to say that cells of incompatible data types may be targeted, but there will be no attempt to format them.

Targeting cells with columns and rows

Targeting of values is done through columns and additionally by rows (if nothing is provided for rows then entire columns are selected). The columns argument allows us to target a subset of cells contained in the resolved columns. We say resolved because aside from declaring column names in c() (with bare column names or names in quotes) we can use tidyselect-style expressions. This can be as basic as supplying a select helper like starts_with(), or, providing a more complex incantation like

where(~ is.numeric(.x) && max(.x, na.rm = TRUE) > 1E6)

which targets numeric columns that have a maximum value greater than 1,000,000 (excluding any NAs from consideration).

By default all columns and rows are selected (with the everything() defaults). Cell values that are incompatible with a given formatting function will be skipped over, like character values and numeric fmt_*() functions. So it's safe to select all columns with a particular formatting function (only those values that can be formatted will be formatted), but, you may not want that. One strategy is to format the bulk of cell values with one formatting function and then constrain the columns for later passes with other types of formatting (the last formatting done to a cell is what you get in the final output).

Once the columns are targeted, we may also target the rows within those columns. This can be done in a variety of ways. If a stub is present, then we potentially have row identifiers. Those can be used much like column names in the columns-targeting scenario. We can use simpler tidyselect-style expressions (the select helpers should work well here) and we can use quoted row identifiers in c(). It's also possible to use row indices (e.g., c(3, 5, 6)) though these index values must correspond to the row numbers of the input data (the indices won't necessarily match those of rearranged rows if row groups are present). One more type of expression is possible, an expression that takes column values (can involve any of the available columns in the table) and returns a logical vector. This is nice if you want to base formatting on values in the column or another column, or, you'd like to use a more complex predicate expression.

Compatibility of arguments with the from_column() helper function

The from_column() helper function can be used with certain arguments of fmt_icon() to obtain varying parameter values from a specified column within the table. This means that each row could be formatted a little bit differently. These arguments provide support for from_column():

• height

• sep

• stroke_color

• stroke_width

• stroke_alpha

• fill_color

• fill_alpha

• vertical_adj

• margin_left

• margin_right

• a11y

Please note that for each of the aforementioned arguments, a from_column() call needs to reference a column that has data of the correct type (this is different for each argument). Additional columns for parameter values can be generated with the cols_add() function (if not already present). Columns that contain parameter data can also be hidden from final display with cols_hide(). Finally, there is no limitation to how many arguments the from_column() helper is applied so long as the arguments belong to this closed set.

Icons that can be used

The fmt_icon() function relies on an installation of the fontawesome package to operate and every icon within that package can be accessed here with either an icon name or a full name. For example, the Arrow Down icon has an icon name of "arrow-down" and its corresponding full name is "fas fa-arrow-down". In most cases you'll want to use the shorter name, but some icons have both a Solid ("fas") and a Regular ("far") variant so only the full name can disambiguate the pairing. In the latest release of fontawesome (v0.5.2), there are 2,025 icons and you can view the entire icon listing by using the info_icons() function. What you'll get from that is an information table showing every icon and associated set of identifiers.

Examples

For this first example of generating icons with fmt_icon(), let's make a simple tibble that has two columns of Font Awesome icon names. We separate multiple icons per cell with commas. By default, the icons are 1 em in height; we're going to make the icons slightly larger here (so we can see the fine details of them) by setting height = "4em".

dplyr::tibble(
  animals = c(
    "hippo", "fish,spider", "mosquito,locust,frog",
    "dog,cat", "kiwi-bird"
  ),
  foods = c(
    "bowl-rice", "egg,pizza-slice", "burger,lemon,cheese",
    "carrot,hotdog", "bacon"
  )
) |>
  gt() |>
  fmt_icon(height = "4em") |>
  cols_align(align = "center", columns = everything())

Let's take a few rows from the towny dataset and make it so the csd_type column contains Font Awesome icon names (we want only the "city" and "house-chimney" icons here). After using fmt_icon() to format the csd_type column, we get icons that are representative of the two categories of municipality for this subset of data.

towny |>
  dplyr::select(name, csd_type, population_2021) |>
  dplyr::filter(csd_type %in% c("city", "town")) |>
  dplyr::group_by(csd_type) |>
  dplyr::arrange(desc(population_2021)) |>
  dplyr::slice_head(n = 5) |>
  dplyr::ungroup() |>
  dplyr::mutate(
    csd_type = ifelse(csd_type == "town", "house-chimney", "city")
  ) |>
  gt() |>
  fmt_integer() |>
  fmt_icon(columns = csd_type) |>
  cols_move_to_start(columns = csd_type) |>
  cols_label(
    csd_type = "",
    name = "City/Town",
    population_2021 = "Population"
  )

Let's use a portion of the metro dataset to create a gt table. Depending on which train services are offered at the subset of stations, Font Awesome icon names will be applied to cells where the different services exist (the specific names are "train-subway", "train", and "train-tram"). With tidyr's unite() function, those icon names can be converged into a single column (services) with the NA values removed. Since the names correspond to icons and they are in the correct format (separated by commas), they can be formatted as Font Awesome icons with the fmt_icon() function.

metro |>
  dplyr::select(name, lines, connect_rer, connect_tramway, location) |>
  dplyr::slice_tail(n = 10) |>
  dplyr::mutate(lines = "train-subway") |>
  dplyr::mutate(connect_rer = ifelse(!is.na(connect_rer), "train", NA)) |>
  dplyr::mutate(
    connect_tramway = ifelse(!is.na(connect_tramway), "train-tram", NA)
  ) |>
  tidyr::unite(
    col = services,
    lines:connect_tramway,
    sep = ",",
    na.rm = TRUE
  ) |>
  gt() |>
  fmt_icon(
    columns = services,
    a11y = "decorative"
  ) |>
  cols_merge(
    columns = c(name, services),
    pattern = "{1} ({2})"
  ) |>
  cols_label(
    name = "Station",
    location = "Location"
  )

Taking a handful of starred reviews from a popular film review website, we will attempt to format a numerical score (0 to 4) to use the "star" and "star-half" icons. In this case, it is useful to generate the repeating sequence of icon names (separated by commas) in the rating column before introducing the table to gt(). We can make use of the numerical rating values in stars within the fmt_icon() function with a little help from the from_column() helper. Using that, we can dynamically adjust the icon's fill_alpha (i.e., opacity) value and accentuate the films with higher scores.

dplyr::tibble(
  film = c(
    "The Passengers of the Night", "Serena", "The Father",
    "Roma", "The Handmaiden", "Violet", "Vice"
  ),
  stars = c(3, 1, 3.5, 4, 4, 2.5, 1.5)
) |>
  dplyr::mutate(rating = dplyr::case_when(
    stars %% 1 == 0 ~ strrep("star,", stars),
    stars %% 1 != 0 ~ paste0(strrep("star,", floor(stars)), "star-half")
  )) |>
  gt() |>
  fmt_icon(
    columns = rating,
    fill_color = "red",
    fill_alpha = from_column("stars", fn = function(x) x / 4)
  ) |>
  cols_hide(columns = stars) |>
  tab_source_note(
    source_note = md(
      "Data obtained from <https://www.rogerebert.com/reviews>."
    )
  )

Function ID

3-22

Function Introduced

In Development

See also

Other data formatting functions: data_color(), fmt_auto(), fmt_bins(), fmt_bytes(), fmt_currency(), fmt_datetime(), fmt_date(), fmt_duration(), fmt_engineering(), fmt_flag(), fmt_fraction(), fmt_image(), fmt_index(), fmt_integer(), fmt_markdown(), fmt_number(), fmt_partsper(), fmt_passthrough(), fmt_percent(), fmt_roman(), fmt_scientific(), fmt_spelled_num(), fmt_time(), fmt_units(), fmt_url(), fmt(), sub_large_vals(), sub_missing(), sub_small_vals(), sub_values(), sub_zero()