Move condition to CSS

core/modules/navigation/components/toolbar-button/toolbar-button.css

@@ -105,6 +105,14 @@
 [class*="toolbar-button--icon"] {
   padding-inline: var(--admin-toolbar-space-10);
 }
+[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon))::before {
+  flex-shrink: 0;
+  content: attr(data-icon-text);
+  text-align: center;
+  color: currentColor;
+  font-size: calc(0.75 * var(--admin-toolbar-rem));
+  inline-size: var(--toolbar-button-icon-size);
+}
 .toolbar-button--primary {
   --toolbar-button-color: var(--admin-toolbar-color-white);
   --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
@@ -179,10 +187,3 @@
   inline-size: var(--toolbar-button-icon-size);
   block-size: var(--toolbar-button-icon-size);
 }
-.toolbar-button__icon-text {
-  flex-shrink: 0;
-  text-align: center;
-  color: currentColor;
-  font-size: calc(0.75 * var(--admin-toolbar-rem));
-  inline-size: var(--toolbar-button-icon-size);
-}

core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css

@@ -116,6 +116,17 @@
   padding-inline: var(--admin-toolbar-space-10);
 }
 
+[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {
+  &::before {
+    flex-shrink: 0;
+    content: attr(data-icon-text);
+    text-align: center;
+    color: currentColor;
+    font-size: calc(0.75 * var(--admin-toolbar-rem));
+    inline-size: var(--toolbar-button-icon-size);
+  }
+}
+
 .toolbar-button--primary {
   --toolbar-button-color: var(--admin-toolbar-color-white);
   --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
@@ -214,11 +225,3 @@
   inline-size: var(--toolbar-button-icon-size);
   block-size: var(--toolbar-button-icon-size);
 }
-
-.toolbar-button__icon-text {
-  flex-shrink: 0;
-  text-align: center;
-  color: currentColor;
-  font-size: calc(0.75 * var(--admin-toolbar-rem));
-  inline-size: var(--toolbar-button-icon-size);
-}

core/modules/navigation/components/toolbar-button/toolbar-button.twig

@@ -19,18 +19,13 @@ appear after main classes #}
   {# We take the first two letters of the button text to use as a fallback when
   the toolbar button does not have a pre-assigned icon. #}
   {% set icon_text = text|slice(0, 2)|join('') %}
-  {% set attributes = attributes.setAttribute('data-index-text', text|first|lower) %}
+  {% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}
 {% endif %}
 
 <{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
 
   {% if icon %}
-    {% set icon = icon('navigation', icon, { class: 'toolbar-button__icon', size: 20 }) %}
-    {% if icon|render is empty %}
-      <span class="toolbar-button__icon-text">{{ icon_text }}</span>
-    {% else %}
-      {{ icon }}
-    {% endif %}
+    {{ icon('navigation', icon, { class: 'toolbar-button__icon', size: 20 }) }}
   {% endif %}
 
   {% if action %}