From fe50f330affc09d4e6d7963c3ac4cbf1602b970f Mon Sep 17 00:00:00 2001
From: tcbegley <tomcbegley@gmail.com>
Date: Mon, 22 Sep 2025 08:06:37 +0100
Subject: [PATCH] Add labels with icons example to tabs docs

---
 docs/components_page/components/tabs.md       | 24 +++++++++++++++++++
 .../components/tabs/labels_with_icons.py      | 16 +++++++++++++
 docs/static/docs.css                          | 19 ++++++++++++++-
 docs/templates/partials/head.html             |  1 +
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 docs/components_page/components/tabs/labels_with_icons.py

diff --git a/docs/components_page/components/tabs.md b/docs/components_page/components/tabs.md
index f7880026e..6a794d82d 100644
--- a/docs/components_page/components/tabs.md
+++ b/docs/components_page/components/tabs.md
@@ -35,6 +35,30 @@ To apply certain styles only to the currently active tab, you can use the `activ
 
 {{example:components/tabs/active_style.py:tabs}}
 
+## Labels with icons
+
+Unfortunately it is currently only possible to use strings for tab labels, and not arbitrary Dash components. It is possible however to use some custom CSS to add icons to tabs as this example shows. If you try this yourself, make sure you [link the FontAwesome CSS](https://www.dash-bootstrap-components.com/docs/icons/).
+
+```css
+#labelled-tabs .nav-item .nav-link::after {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 200;
+  font-style: normal;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none;
+}
+
+#labelled-tabs .nav-item:nth-child(1) .nav-link::after {
+  content: '\f005';
+}
+
+#labelled-tabs .nav-item:nth-child(2) .nav-link::after {
+  content: '\f2bd';
+}
+```
+
+{{example:components/tabs/labels_with_icons.py:tabs}}
+
 {{apidoc:src/components/tabs/Tabs.js}}
 
 {{apidoc:src/components/tabs/Tab.js}}
diff --git a/docs/components_page/components/tabs/labels_with_icons.py b/docs/components_page/components/tabs/labels_with_icons.py
new file mode 100644
index 000000000..e13cec5af
--- /dev/null
+++ b/docs/components_page/components/tabs/labels_with_icons.py
@@ -0,0 +1,16 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+tabs = dbc.Tabs(
+    [
+        dbc.Tab(
+            html.Div("This is the content of tab 1", className="p-4"),
+            label="Tab 1",
+        ),
+        dbc.Tab(
+            html.Div("This is the content of tab 2", className="p-4"),
+            label="Tab 2",
+        ),
+    ],
+    id="labelled-tabs",
+)
diff --git a/docs/static/docs.css b/docs/static/docs.css
index 6303abdef..ac16498e4 100644
--- a/docs/static/docs.css
+++ b/docs/static/docs.css
@@ -65,7 +65,7 @@ span.hljs-meta {
 }
 
 .docs-sidebar .nav-link {
-  color:  var(--bs-body-color)
+  color:  var(--bs-body-color);
   padding: 0.3rem 0.5rem 0.3rem 1rem;
   border-left: 2px solid transparent;
 }
@@ -152,6 +152,23 @@ span.hljs-meta {
   outline: none;
 }
 
+/* css for labelled tabs */
+#labelled-tabs .nav-item .nav-link::after {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 200;
+  font-style: normal;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none;
+}
+
+#labelled-tabs .nav-item:nth-child(1) .nav-link::after {
+  content: '\f005';
+}
+
+#labelled-tabs .nav-item:nth-child(2) .nav-link::after {
+  content: '\f2bd';
+}
+
 /* radio button group example */
 .button-group-demo .radio-group .form-check {
   padding-left: 0;
diff --git a/docs/templates/partials/head.html b/docs/templates/partials/head.html
index 596043489..5b36af329 100644
--- a/docs/templates/partials/head.html
+++ b/docs/templates/partials/head.html
@@ -8,3 +8,4 @@
 <link rel="stylesheet" href="/static/docs.css" />
 <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.2/css/all.css" />