diff --git a/docs/components_page/components/tabs.md b/docs/components_page/components/tabs.md
index f7880026..6a794d82 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 00000000..e13cec5a
--- /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 6303abde..ac16498e 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 59604348..5b36af32 100644
--- a/docs/templates/partials/head.html
+++ b/docs/templates/partials/head.html
@@ -8,3 +8,4 @@
+