Upgrade Icon Packages (#837)

* Add new CDN link for 6.1.1

* Update FA documentation links

* Update demos to use inbuilt FA

* Bump Bootstrap Icons to v1.8.1

Co-authored-by: Tom Begley <[email protected]>

Author: glsdown

R/icons.R

@@ -1,5 +1,5 @@
 #' @export'
 dbcIcons <- list(
-  BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
-  FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+  BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css",
+  FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"
 )

dash_bootstrap_components/icons.py

@@ -1,5 +1,5 @@
 BOOTSTRAP = (
-    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/"
+    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/"
     "font/bootstrap-icons.css"
 )
-FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"

docs/content/docs/faq.md

@@ -70,7 +70,7 @@ See the [Dash docs](https://dash.plotly.com/external-resources) for details on l
 
 ### Why aren't my icons appearing?
 
-The CDN links for icons we include are for [Bootstrap Icons v1.5.0](https://icons.getbootstrap.com/) and [Font Awesome v5.15.4](https://fontawesome.com/). With either library, if you are trying to use an icon, and it simply isn't appearing, then please check which icon documentation version you are using. Both libraries add new icons regularly, and it may be that the icon you want has been renamed or isn't included in the versions we include listed above.
+The CDN links for icons we include are for [Bootstrap Icons v1.8.1](https://icons.getbootstrap.com/) and [Font Awesome v6.1.1](https://fontawesome.com/). With either library, if you are trying to use an icon, and it simply isn't appearing, then please check which icon documentation version you are using. Both libraries add new icons regularly, and it may be that the icon you want has been renamed or isn't included in the versions we include listed above.
 
 ### How do I create a multi-select?
 

docs/content/docs/icons.md

@@ -12,11 +12,11 @@ There are a number of different icon libraries available, which you can link to
 
 ## Packaged CDN links
 
-_dash-bootstrap-components_ contains CDN links for [Bootstrap Icons v1.5.0](https://icons.getbootstrap.com/) and [Font Awesome v5.15.4](https://fontawesome.com/), two libraries of icons you can use in your apps. You can use either of them by adding them to `external_stylesheets` when instantiating your app.
+_dash-bootstrap-components_ contains CDN links for [Bootstrap Icons v1.8.1](https://icons.getbootstrap.com/) and [Font Awesome v6.1.1](https://fontawesome.com/), two libraries of icons you can use in your apps. You can use either of them by adding them to `external_stylesheets` when instantiating your app.
 
 Bootstrap Icons was developed by the Bootstrap team specifically for use with Bootstrap. There is excellent documentation on how to use them on the [Bootstrap website](https://icons.getbootstrap.com/#usage), and a small example below.
 
-Font Awesome is perhaps the most widely used icon library and is very commonly used with Bootstrap. Usage is similar to Bootstrap Icons, check [their documentation](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use) for more details.
+Font Awesome is perhaps the most widely used icon library and is very commonly used with Bootstrap. Usage is similar to Bootstrap Icons, check [their documentation](https://fontawesome.com/docs/web/add-icons/how-to#add-icons-to-html) for more details.
 
 With either library, if you are trying to use an icon, and it simply isn't appearing, then please check which icon documentation version you are using. Both libraries add new icons regularly, and it may be that the icon you want has been renamed or isn't included in the versions we include listed above.
 

docs/demos/__init__.py

@@ -6,7 +6,6 @@
 from .theme_explorer import app as theme_explorer
 
 SERVE_LOCALLY = os.getenv("DBC_DOCS_MODE", "production") == "dev"
-FA = "https://use.fontawesome.com/releases/v5.15.3/css/all.css"
 
 SHEETS = [
     ("bootstrap", dbc.themes.BOOTSTRAP),
@@ -43,7 +42,11 @@ def register_apps():
 
     for name, sheet in SHEETS:
         new_theme_explorer = dash.Dash(
-            external_stylesheets=[FA, sheet, "/static/loading.css"],
+            external_stylesheets=[
+                dbc.icons.FONT_AWESOME,
+                sheet,
+                "/static/loading.css",
+            ],
             requests_pathname_prefix=f"/docs/themes/explorer/{name}/",
             suppress_callback_exceptions=True,
             serve_locally=SERVE_LOCALLY,

examples/python/templates/multi-page-apps/collapsible-sidebar-with-icons/app.py

@@ -16,10 +16,11 @@
 import dash_bootstrap_components as dbc
 from dash import Input, Output, dcc, html
 
-FA = "https://use.fontawesome.com/releases/v5.15.1/css/all.css"
 PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
 
-app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FA])
+app = dash.Dash(
+    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
+)
 
 sidebar = html.Div(
     [

examples/python/templates/multi-page-apps/sidebar-with-submenus/sidebar.py

@@ -15,9 +15,9 @@
 from dash import Input, Output, State, dcc, html
 
 # link fontawesome to get the chevron icons
-FA = "https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-
-app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FA])
+app = dash.Dash(
+    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
+)
 
 # the style arguments for the sidebar. We use position:fixed and a fixed width
 SIDEBAR_STYLE = {

jl/icons.jl

@@ -1,6 +1,6 @@
 export dbc_icons
 
 dbc_icons = (
-    BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
-    FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
+    BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css",
+    FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css",
 )