Search code examples
rshinyfluent-uishinywidgets

How to use Fluent UI icons in ShinyWidgets

I have a problem using fluent UI icons in "shinyWidgets" Packages.

I can't access fluent UI icons using tags$i() and checkboxGroupButtons() in contrast to Fontawesome and Glyphicon icons

please let me know if you have any solutions.

library(shiny)
library(shiny.fluent)
    
ui <- fluidPage(
  tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"),
  tags$link(rel = "stylesheet", type = "text/cstt", href = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"),
  
  checkboxGroupButtons(
    inputId = "check",
    label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar",  
                `<i class='fa fa-signal'></i>` = "signal", 
                `<i class='fa fa-terminal'></i>` = "terminal",
                `<i class="glyphicon glyphicon-tree-deciduous"></i>` = "tree",
                `<i class="ms-Icon ms-Icon--Color" aria-hidden="true"></i>`= "Color"),
    justified = FALSE), 
  verbatimTextOutput("OUT"), 
  span("FontIcon expression in shiny,fluent"), FontIcon(iconName = "Color"),br(),
  span("glyphicon i tag"), tags$i(class="glyphicon glyphicon-tree-deciduous"),br(),
  span("Fluent UI i tag :"), tags$i(class="ms-Icon ms-Icon--Color"),br(),
  span("Fontawesome i tag:"), tags$i(class="fa fa-bar-chart"))

server <-function(input, output, session)
{
  output$OUT <- renderText({
    print(input$check)
  })
}

shinyApp(ui = ui, server = server)
Solution

  • Remove type = "cstt" and this works:

    enter image description here

    library(shiny)
library(shiny.fluent)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"),
    tags$link(rel = "stylesheet", href = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css")
  ),
  checkboxGroupButtons(
    inputId = "check",
    label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar",  
                `<i class='fa fa-signal'></i>` = "signal", 
                `<i class='fa fa-terminal'></i>` = "terminal",
                `<i class="glyphicon glyphicon-tree-deciduous"></i>` = "tree",
                `<i class="ms-Icon ms-Icon--Color" aria-hidden="true"></i>`= "Color"),
    justified = FALSE), 
  verbatimTextOutput("OUT"), 
  span("FontIcon expression in shiny,fluent"), FontIcon(iconName = "Color"),br(),
  span("glyphicon i tag"), tags$i(class="glyphicon glyphicon-tree-deciduous"),br(),
  span("Fluent UI i tag :"), tags$i(class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"),br(),
  span("Fontawesome i tag:"), tags$i(class="fa fa-bar-chart"))

server <-function(input, output, session)
{
  output$OUT <- renderText({
    print(input$check)
  })
}

shinyApp(ui = ui, server = server)