Add icon to loadingButton

R/loadingButton.R

@@ -4,6 +4,7 @@
 #'
 #' @param inputId the input id
 #' @param label the button text (label)
+#' @param icon the button icon (default: \code{NULL}).
 #' @param class the class(es) to apply to the button
 #' @param style style for button (pre-loading); character string w/ CSS styling format: "color: black; background-color: red;"
 #' @param loadingLabel text to show after button is clicked (e.g. during loading)
@@ -22,6 +23,7 @@
 loadingButton <- function(
   inputId,
   label,
+  icon = NULL,
   class = "btn btn-primary",
   style = "width: 150px;",
   loadingLabel = "Loading...",
@@ -36,8 +38,12 @@ loadingButton <- function(
   if (is.null(loadingClass)) loadingClass <- class
   if (is.null(loadingStyle)) loadingStyle <- style
 
+  # Validate the icon
+  icon <- validateIcon(icon)
+
   rOptions <- list(
-    "label" = label, 
+    "label" = label,
+    "icon" = icon$attribs$class,
     "class" = class,
     "style" = style,
     "loadingLabel" = loadingLabel,
@@ -57,7 +63,7 @@ loadingButton <- function(
       id = inputId,
       class = class,
       style = style,
-      label
+      list(icon, label)
     ),
     tags$head(
       htmltools::singleton(
@@ -97,3 +103,21 @@ resetLoadingButton <- function(inputId, session = shiny::getDefaultReactiveDomai
     )
   )
 }
+
+
+#' validateIcon
+#' 
+#' Validate the icon (from \code{shiny:::validateIcon})
+#' 
+#' @noRd
+validateIcon <- function(icon) {
+  if (is.null(icon) || identical(icon, character(0))) {
+    return(icon)
+  }
+  else if (inherits(icon, "shiny.tag") && icon$name == "i") {
+    return(icon)
+  }
+  else {
+    stop("Invalid icon. Use Shiny's 'icon()' function to generate a valid icon")
+  }
+}

inst/assets/js/loadingbutton.js

@@ -45,7 +45,11 @@ LoadingButtons.prototype.create = function (inputId, options) {
     var loading_button = $(this);
 
     loading_button.attr('disabled', true);
-    loading_button.html('<i class="fas fa-' + options.loadingSpinner + ' fa-spin"></i> ' + options.loadingLabel);
+    loading_button.html(
+      '<i class="fas fa-' + options.loadingSpinner + ' fa-spin"></i> ' + 
+      '<i class="' + options.icon + '"></i> ' +
+      options.loadingLabel
+    );
     loading_button.attr('style', options.loadingStyle);
     loading_button.removeClass(options["class"]);
     loading_button.addClass(options.loadingClass);
@@ -65,7 +69,10 @@ LoadingButtons.prototype.resetLoading = function (inputId) {
 
   // restore the active (i.e. non loading styles)
   loading_button.attr('disabled', false);
-  loading_button.html(options_.label);
+  loading_button.html(
+    '<i class="' + options_.icon + '"></i> ' +
+    options_.label
+  );
   loading_button.attr('style', options_.style);
   loading_button.removeClass(options_.loadingClass);
   loading_button.addClass(options_["class"]);