diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 11374b2a3c..fdd4ef01f4 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -46,7 +46,8 @@
 .toolbar .toolbar-bar .toolbar-tab.hidden {
   display: none;
 }
-.toolbar a {
+.toolbar a,
+.toolbar span[class*="toolbar-icon-menu-link-content:"] {
   display: block;
   line-height: 1;
 }
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index b0c8ada389..52558fac38 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -84,7 +84,9 @@
   background-color: #f5f5f5;
 }
 .toolbar-tray a,
-.toolbar-tray a:visited {
+.toolbar-tray a:visited,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"],
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:visited {
   padding: 1em 1.3333em;
   cursor: pointer;
   text-decoration: none;
@@ -93,7 +95,11 @@
 .toolbar-tray a:hover,
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
-.toolbar-tray a.is-active {
+.toolbar-tray a.is-active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:hover,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:focus,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"].is-active {
   text-decoration: underline;
   color: #000;
 }
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index bb2a5ff090..999b175598 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -128,7 +128,7 @@
         text: '',
       };
       // Initialize items and their links.
-      $menu.find('li > a').wrap('<div class="toolbar-box">');
+      $menu.find('li > a, li > span').wrap('<div class="toolbar-box">');
       // Add a handle to each list item if it has a menu.
       $menu.find('li').each((index, element) => {
         const $item = $(element);
diff --git a/core/themes/claro/css/components/toolbar.module.css b/core/themes/claro/css/components/toolbar.module.css
index 99daf51388..10cd06f034 100644
--- a/core/themes/claro/css/components/toolbar.module.css
+++ b/core/themes/claro/css/components/toolbar.module.css
@@ -54,7 +54,8 @@
 .toolbar .toolbar-bar .toolbar-tab.hidden {
   display: none;
 }
-.toolbar a {
+.toolbar a,
+.toolbar span[class*="toolbar-icon-menu-link-content:"] {
   display: block;
   line-height: 1;
 }
diff --git a/core/themes/claro/css/components/toolbar.module.pcss.css b/core/themes/claro/css/components/toolbar.module.pcss.css
index 1a81df0071..0a4041f9f2 100644
--- a/core/themes/claro/css/components/toolbar.module.pcss.css
+++ b/core/themes/claro/css/components/toolbar.module.pcss.css
@@ -55,7 +55,8 @@
       }
     }
   }
-  & a {
+  & a,
+  & span[class*="toolbar-icon-menu-link-content:"] {
     display: block;
     line-height: 1;
   }
diff --git a/core/themes/claro/css/theme/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.css
index bd9da734d6..ca2da5b46b 100644
--- a/core/themes/claro/css/theme/toolbar.theme.css
+++ b/core/themes/claro/css/theme/toolbar.theme.css
@@ -93,7 +93,9 @@
   background-color: #f5f5f5;
 }
 .toolbar-tray a,
-.toolbar-tray a:visited {
+.toolbar-tray a:visited,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"],
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:visited {
   padding: 1em 1.3333em;
   cursor: pointer;
   -webkit-text-decoration: none;
@@ -104,6 +106,11 @@
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
 .toolbar-tray a.is-active {
+.toolbar-tray a.is-active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:hover,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:focus,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"].is-active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #000;
diff --git a/core/themes/claro/css/theme/toolbar.theme.pcss.css b/core/themes/claro/css/theme/toolbar.theme.pcss.css
index 7f1e21764f..03e49f79c8 100644
--- a/core/themes/claro/css/theme/toolbar.theme.pcss.css
+++ b/core/themes/claro/css/theme/toolbar.theme.pcss.css
@@ -87,7 +87,9 @@
   background-color: #f5f5f5;
 }
 .toolbar-tray a,
-.toolbar-tray a:visited {
+.toolbar-tray a:visited,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"],
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:visited {
   padding: 1em 1.3333em;
   cursor: pointer;
   text-decoration: none;
@@ -96,7 +98,11 @@
 .toolbar-tray a:hover,
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
-.toolbar-tray a.is-active {
+.toolbar-tray a.is-active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:hover,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:active,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"]:focus,
+.toolbar-tray span[class*="toolbar-icon-menu-link-content:"].is-active {
   text-decoration: underline;
   color: #000;
 }