Issue #3483209 by finnsky, mogtofu33, m4olivei, plopesc, pdureau: Navigation leverage icon core API

core/modules/navigation/assets/icons/status.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.125 16.875C13.125 17.0975 13.059 17.315 12.9354 17.5C12.8118 17.685 12.6361 17.8292 12.4305 17.9144C12.225 17.9995 11.9988 18.0218 11.7805 17.9784C11.5623 17.935 11.3618 17.8278 11.2045 17.6705C11.0472 17.5132 10.94 17.3127 10.8966 17.0945C10.8532 16.8762 10.8755 16.65 10.9606 16.4445C11.0458 16.2389 11.19 16.0632 11.375 15.9396C11.56 15.816 11.7775 15.75 12 15.75C12.2984 15.75 12.5845 15.8685 12.7955 16.0795C13.0065 16.2905 13.125 16.5766 13.125 16.875ZM12 6.75C9.93188 6.75 8.25 8.26406 8.25 10.125V10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61033 11.171 8.80109 11.25 9 11.25C9.19892 11.25 9.38968 11.171 9.53033 11.0303C9.67099 10.8897 9.75 10.6989 9.75 10.5V10.125C9.75 9.09375 10.7597 8.25 12 8.25C13.2403 8.25 14.25 9.09375 14.25 10.125C14.25 11.1562 13.2403 12 12 12C11.8011 12 11.6103 12.079 11.4697 12.2197C11.329 12.3603 11.25 12.5511 11.25 12.75V13.5C11.25 13.6989 11.329 13.8897 11.4697 14.0303C11.6103 14.171 11.8011 14.25 12 14.25C12.1989 14.25 12.3897 14.171 12.5303 14.0303C12.671 13.8897 12.75 13.6989 12.75 13.5V13.4325C14.46 13.1184 15.75 11.7544 15.75 10.125C15.75 8.26406 14.0681 6.75 12 6.75ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96452 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7662 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z" fill="currentColor"/>
+</svg>

core/modules/navigation/assets/icons/workspaces.svg

+<svg viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.5 6.25H1.5C1.10218 6.25 0.720644 6.40804 0.43934 6.68934C0.158035 6.97064 0 7.35218 0 7.75V16.75C0 17.1478 0.158035 17.5294 0.43934 17.8107C0.720644 18.092 1.10218 18.25 1.5 18.25H16.5C16.8978 18.25 17.2794 18.092 17.5607 17.8107C17.842 17.5294 18 17.1478 18 16.75V7.75C18 7.35218 17.842 6.97064 17.5607 6.68934C17.2794 6.40804 16.8978 6.25 16.5 6.25ZM16.5 16.75H1.5V7.75H16.5V16.75ZM1.5 4C1.5 3.80109 1.57902 3.61032 1.71967 3.46967C1.86032 3.32902 2.05109 3.25 2.25 3.25H15.75C15.9489 3.25 16.1397 3.32902 16.2803 3.46967C16.421 3.61032 16.5 3.80109 16.5 4C16.5 4.19891 16.421 4.38968 16.2803 4.53033C16.1397 4.67098 15.9489 4.75 15.75 4.75H2.25C2.05109 4.75 1.86032 4.67098 1.71967 4.53033C1.57902 4.38968 1.5 4.19891 1.5 4ZM3 1C3 0.801088 3.07902 0.610322 3.21967 0.46967C3.36032 0.329018 3.55109 0.25 3.75 0.25H14.25C14.4489 0.25 14.6397 0.329018 14.7803 0.46967C14.921 0.610322 15 0.801088 15 1C15 1.19891 14.921 1.38968 14.7803 1.53033C14.6397 1.67098 14.4489 1.75 14.25 1.75H3.75C3.55109 1.75 3.36032 1.67098 3.21967 1.53033C3.07902 1.38968 3 1.19891 3 1Z"/>
+</svg>

core/modules/navigation/components/badge/badge.css

@@ -10,7 +10,6 @@
  * Toolbar badge styles.
  */
 .toolbar-badge {
-  margin-top: 0.1875rem;
   padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);
   border-radius: 1rem;
   background-color: var(--admin-toolbar-color-gray-100);

core/modules/navigation/components/badge/badge.pcss.css

@@ -5,7 +5,6 @@
  */
 
 .toolbar-badge {
-  margin-top: 3px;
   padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);
   border-radius: 1rem;
   background-color: var(--admin-toolbar-color-gray-100);

core/modules/navigation/components/title/title.css

@@ -22,31 +22,13 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-/* Class starts with `toolbar-title--icon`  */
-[class*="toolbar-title--icon"] {
+.toolbar-title:has(.toolbar-title__icon) {
   display: flex;
   align-items: center;
   gap: var(--admin-toolbar-space-8);
 }
-[class*="toolbar-title--icon"]::before {
-  display: flex;
+.toolbar-title__icon {
   flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1px;
-  content: "";
-  color: currentColor;
-  background-color: currentColor;
   inline-size: var(--admin-toolbar-space-16);
   block-size: var(--admin-toolbar-space-16);
-  mask-repeat: no-repeat;
-  mask-position: center center;
-  mask-size: 100% auto;
-  mask-image: var(--icon);
-}
-.toolbar-title--icon--file {
-  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3e%3cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z'%3e%3c/path%3e%3c/svg%3e");
-}
-.toolbar-title--icon--database {
-  --icon: url("data:image/svg+xml,%3csvg fill='none' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath clip-rule='evenodd' d='m2 2.5c0 .00062.00009.00292.00153.00765.00169.00557.00588.01658.01601.03307.02122.03457.0645.08654.14558.15044.16509.13011.43496.26914.81301.39516.75088.25029 1.82002.41368 3.02387.41368 1.20386 0 2.27299-.16339 3.02387-.41368.37805-.12602.64792-.26505.81301-.39516.08108-.0639.12436-.11587.14558-.15044.01013-.01649.01431-.0275.01601-.03307.00146-.00479.00153-.00695.00153-.00754 0-.00003 0 .00002 0 0 0-.00036 0-.00258-.00153-.00776-.0017-.00557-.00588-.01658-.01601-.03307-.02122-.03457-.0645-.08654-.14558-.15044-.16509-.13011-.43496-.26914-.81301-.39516-.75088-.25029-1.82001-.41368-3.02387-.41368-1.20385 0-2.27299.16339-3.02387.41368-.37805.12602-.64792.26505-.81301.39516-.08108.0639-.12436.11587-.14558.15044-.01013.01649-.01432.0275-.01601.03307-.00154.00504-.00153.00721-.00153.00765zm8 1.2633c-.20061.10259-.42333.19284-.65991.2717-.8778.2926-2.05866.465-3.34009.465s-2.46229-.1724-3.34009-.465c-.23658-.07886-.4593-.16911-.65991-.2717v2.2367l.00008.00078c.0001.00065.00037.00219.00113.00474.0015.00503.00535.01547.01486.03134.01989.03316.06113.08421.13994.14763.16054.12919.42904.27147.82012.40183.77887.25962 1.86698.41368 3.02387.41368s2.245-.15406 3.02387-.41368c.39108-.13036.65958-.27264.82012-.40183.07881-.06342.12005-.11447.13994-.14763.00951-.01587.01336-.02631.01486-.03134.00047-.00159.00076-.00279.00093-.00362.0001-.00051.00016-.00088.0002-.00112l.00007-.00065zm1-1.2633c0-.42597-.2594-.75221-.5441-.97657-.2904-.22881-.67952-.413-1.11581-.558432-.8778-.2926-2.05866-.464998-3.34009-.464998s-2.46229.172398-3.34009.464998c-.43629.145432-.82543.329622-1.11576.558432-.2847.22436-.54415.5506-.54415.97657v7c0 .41262.2462.7359.52907.9636.28749.2313.678.4205 1.13084.5714.90895.303 2.11003.465 3.34009.465s2.43114-.162 3.34009-.465c.45283-.1509.84331-.3401 1.13081-.5714.2829-.2277.5291-.55098.5291-.9636zm-1 4.76299c-.19854.10174-.42052.19222-.65991.27201-.90895.30299-2.11003.465-3.34009.465s-2.43114-.16201-3.34009-.465c-.23939-.07979-.46137-.17027-.65991-.27201v2.23701l.00008.00078c.0001.00065.00037.00219.00113.00474.0015.00503.00535.01547.01486.03134.01989.03316.06113.08421.13994.14763.16054.12919.42904.27147.82012.40181.77887.2596 1.86698.4137 3.02387.4137s2.245-.1541 3.02387-.4137c.39108-.13034.65958-.27262.82012-.40181.07881-.06342.12005-.11447.13994-.14763.00951-.01587.01336-.02631.01486-.03134.00076-.00255.00103-.00409.00113-.00474l.00007-.00065z' fill='%23000' fill-rule='evenodd'/%3e%3c/svg%3e");
 }

core/modules/navigation/components/title/title.pcss.css

@@ -22,33 +22,14 @@
   }
 }
 
-/* Class starts with `toolbar-title--icon`  */
-[class*="toolbar-title--icon"] {
+.toolbar-title:has(.toolbar-title__icon) {
   display: flex;
   align-items: center;
   gap: var(--admin-toolbar-space-8);
-
-  &::before {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    margin-top: 1px;
-    content: "";
-    color: currentColor;
-    background-color: currentColor;
-    inline-size: var(--admin-toolbar-space-16);
-    block-size: var(--admin-toolbar-space-16);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100% auto;
-    mask-image: var(--icon);
-  }
 }
 
-.toolbar-title--icon--file {
-  --icon: url(./assets/file.svg);
-}
-.toolbar-title--icon--database {
-  --icon: url(./assets/database.svg);
+.toolbar-title__icon {
+  flex-shrink: 0;
+  inline-size: var(--admin-toolbar-space-16);
+  block-size: var(--admin-toolbar-space-16);
 }

core/modules/navigation/components/title/title.twig

 {%
   set classes = [
     'toolbar-title',
-    icon ? 'toolbar-title--icon--' ~ icon : '',
   ]
 %}
 {% if modifiers is iterable %}
@@ -13,6 +12,9 @@
 {% endif %}
 
 <{{html_tag|default('h2')}}{{attributes.addClass(classes)}}>
+  {% if icon %}
+    {{ icon('navigation', icon, { class: 'toolbar-title__icon', size: 16 }) }}
+  {% endif %}
   <span class="toolbar-title__label">
     {% block content %}
       {{ content }}

core/modules/navigation/components/toolbar-button/assets/chevron.svg

-<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z"/>
-</svg>

core/modules/navigation/components/toolbar-button/assets/thin-pencil.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="16" height="16" fill="white" fill-opacity="0.01"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6438 1.22289C12.4355 1.01461 12.0978 1.01461 11.8896 1.22289L3.96216 9.15026C3.8662 9.24622 3.78944 9.3596 3.73598 9.48433L2.17644 13.1232C2.09053 13.3237 2.13532 13.5563 2.28953 13.7105C2.44374 13.8647 2.67629 13.9095 2.87674 13.8236L6.51567 12.264C6.6404 12.2106 6.75378 12.1338 6.84974 12.0379L14.7771 4.11047C14.9854 3.90219 14.9854 3.5645 14.7771 3.35623L12.6438 1.22289ZM4.71641 9.90452L12.2666 2.35426L13.6457 3.73335L6.09549 11.2836L4.50049 11.9672L4.03283 11.4995L4.71641 9.90452Z" fill="white"/>
-</svg>

core/modules/navigation/components/toolbar-button/assets/workspaces.svg

-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5 6.25H1.5C1.10218 6.25 0.720644 6.40804 0.43934 6.68934C0.158035 6.97064 0 7.35218 0 7.75V16.75C0 17.1478 0.158035 17.5294 0.43934 17.8107C0.720644 18.092 1.10218 18.25 1.5 18.25H16.5C16.8978 18.25 17.2794 18.092 17.5607 17.8107C17.842 17.5294 18 17.1478 18 16.75V7.75C18 7.35218 17.842 6.97064 17.5607 6.68934C17.2794 6.40804 16.8978 6.25 16.5 6.25ZM16.5 16.75H1.5V7.75H16.5V16.75ZM1.5 4C1.5 3.80109 1.57902 3.61032 1.71967 3.46967C1.86032 3.32902 2.05109 3.25 2.25 3.25H15.75C15.9489 3.25 16.1397 3.32902 16.2803 3.46967C16.421 3.61032 16.5 3.80109 16.5 4C16.5 4.19891 16.421 4.38968 16.2803 4.53033C16.1397 4.67098 15.9489 4.75 15.75 4.75H2.25C2.05109 4.75 1.86032 4.67098 1.71967 4.53033C1.57902 4.38968 1.5 4.19891 1.5 4ZM3 1C3 0.801088 3.07902 0.610322 3.21967 0.46967C3.36032 0.329018 3.55109 0.25 3.75 0.25H14.25C14.4489 0.25 14.6397 0.329018 14.7803 0.46967C14.921 0.610322 15 0.801088 15 1C15 1.19891 14.921 1.38968 14.7803 1.53033C14.6397 1.67098 14.4489 1.75 14.25 1.75H3.75C3.55109 1.75 3.36032 1.67098 3.21967 1.53033C3.07902 1.38968 3 1.19891 3 1Z" fill="#13161A"/>
-</svg>

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

@@ -52,7 +52,10 @@
 
   &[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
   &[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
-    --icon: url(./assets/throbber.svg);
+    .toolbar-button__icon {
+      fill: transparent;
+      background-image: url(../../assets/icons/throbber.svg);
+    }
 
     & + .ajax-progress--throbber,
     & + .ajax-progress-throbber {
@@ -111,43 +114,16 @@
 /* Class starts with `toolbar-button--icon`  */
 [class*="toolbar-button--icon"] {
   padding-inline: var(--admin-toolbar-space-10);
+}
 
+[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {
   &::before {
-    display: flex;
     flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
     content: attr(data-icon-text);
+    text-align: center;
     color: currentColor;
-    background-image: linear-gradient(currentColor, currentColor 50%, transparent 50%);
-    background-position-y: calc(100% - (100% * var(--icon, 0)));
-    background-size: 100% 200%;
     font-size: calc(0.75 * var(--admin-toolbar-rem));
     inline-size: var(--toolbar-button-icon-size);
-    block-size: var(--toolbar-button-icon-size);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100% auto;
-    -webkit-mask-image: var(--icon);
-    mask-image: var(--icon);
-  }
-
-  &:hover::before {
-    background-color: linear-gradient(var(--admin-toolbar-color-blue-600), var(--admin-toolbar-color-blue-600) 50%, transparent 50%);
-  }
-
-  @media (--forced-colors) {
-    &::before,
-    &:hover::before {
-      background: canvastext;
-    }
-
-    &a {
-      &::before,
-      &:hover::before {
-        background: linktext;
-      }
-    }
   }
 }
 
@@ -157,10 +133,6 @@
   --toolbar-button-hover-color: var(--admin-toolbar-color-white);
   --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
   --toolbar-button-focus-color: var(--admin-toolbar-color-white);
-  --toolbar-button-icon-size: var(--admin-toolbar-space-16);
-
-  font-variation-settings: "wght" 400;
-  padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-12);
 }
 
 .toolbar-button--weight--400 {
@@ -173,43 +145,8 @@
   flex-grow: 1;
 }
 
-[class*="toolbar-button--expand"] {
-  &::after {
-    flex-shrink: 0;
-    margin-inline-start: auto;
-    content: "";
-    transition: transform var(--admin-toolbar-transition);
-    background-color: currentColor;
-    block-size: var(--admin-toolbar-space-16);
-    inline-size: var(--admin-toolbar-space-16);
-    mask-size: var(--admin-toolbar-space-16);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-image: url(./assets/chevron.svg);
-
-    :where([dir="rtl"]) & {
-      transform: rotate(180deg);
-    }
-
-    @media (--forced-colors) {
-      background: canvastext;
-    }
-  }
-}
-
 .toolbar-button--expand--down {
-  &::after {
-    transform: rotate(90deg);
-
-    @media (--forced-colors) {
-      background: canvastext;
-    }
-  }
-
   &[aria-expanded="true"] {
-    &::after {
-      transform: rotate(-90deg);
-    }
     &:focus,
     &:hover {
       border-bottom-right-radius: 0;
@@ -218,113 +155,12 @@
   }
 }
 
-.toolbar-button--icon--announcements-feed-announcement {
-  --icon: url(./assets/announcement.svg);
-  &::before {
-    transform: scaleX(-1);
-  }
-
-  [dir="rtl"] & {
-    &::before {
-      transform: scaleX(1);
-    }
-  }
-}
-
-.toolbar-button--icon--back {
-  --icon: url(./assets/arrow-left.svg);
-}
-
-.toolbar-button--icon--burger {
-  --icon: url(./assets/burger.svg);
-}
-
-.toolbar-button--icon--cross {
-  --icon: url(./assets/cross.svg);
-}
-
-.toolbar-button--icon--dots {
-  --icon: url(./assets/dots.svg);
-}
-
-.toolbar-button--icon--entity-user-collection {
-  --icon: url(./assets/people.svg);
-}
-
-.toolbar-button--icon--help {
-  --icon: url(./assets/help.svg);
-}
-
-.toolbar-button--icon--edit {
-  --icon: url(./assets/edit.svg);
-}
-
-.toolbar-button--icon--navigation-blocks {
-  --icon: url(./assets/blocks.svg);
-}
-
-.toolbar-button--icon--navigation-content {
-  --icon: url(./assets/content.svg);
-}
-
-.toolbar-button--icon--navigation-create {
-  --icon: url(./assets/create.svg);
-}
-
-.toolbar-button--icon--navigation-files {
-  --icon: url(./assets/files.svg);
-}
-
-.toolbar-button--icon--navigation-media {
-  --icon: url(./assets/media.svg);
-}
-
-.toolbar-button--icon--pencil {
-  --icon: url(./assets/pencil.svg);
-}
-
-.toolbar-button--icon--thin-pencil {
-  --icon: url(./assets/thin-pencil.svg);
-}
-
-.toolbar-button--icon--preview {
-  --icon: url(./assets/eye.svg);
-}
-
-.toolbar-button--icon--shortcuts {
-  --icon: url(./assets/shortcuts.svg);
-}
-
-.toolbar-button--icon--system-admin-config {
-  --icon: url(./assets/config.svg);
-}
-
-.toolbar-button--icon--system-admin-reports {
-  --icon: url(./assets/reports.svg);
-}
-
-.toolbar-button--icon--system-admin-structure {
-  --icon: url(./assets/structure.svg);
-}
-
-.toolbar-button--icon--system-modules-list {
-  --icon: url(./assets/extend.svg);
-}
-
-.toolbar-button--icon--system-themes-page {
-  --icon: url(./assets/appearance.svg);
-}
-
-.toolbar-button--icon--navigation-user-links-user-wrapper {
-  --icon: url(./assets/user.svg);
-}
-
-.toolbar-button--icon--workspaces {
-  --icon: url(./assets/workspaces.svg);
+[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
+  scale: -1 1;
 }
 
 .toolbar-button--collapsible {
-  &::after {
+  & .toolbar-button__chevron {
     display: none;
   }
 
@@ -340,7 +176,7 @@
   }
 
   [data-admin-toolbar="expanded"] & {
-    &::after {
+    & .toolbar-button__chevron {
       display: block;
     }
 
@@ -361,3 +197,31 @@
     }
   }
 }
+
+.toolbar-button__chevron {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  transition: rotate var(--admin-toolbar-transition);
+  fill: currentColor;
+  block-size: var(--admin-toolbar-space-16);
+  inline-size: var(--admin-toolbar-space-16);
+
+  :where([dir="rtl"]) & {
+    rotate: 180deg;
+  }
+
+  .toolbar-button--expand--down & {
+    rotate: 90deg;
+  }
+
+  .toolbar-button--expand--down[aria-expanded="true"] & {
+    rotate: -90deg;
+  }
+}
+
+.toolbar-button__icon {
+  fill: currentColor;
+  flex-shrink: 0;
+  inline-size: var(--toolbar-button-icon-size);
+  block-size: var(--toolbar-button-icon-size);
+}

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

@@ -23,6 +23,11 @@ appear after main classes #}
 {% endif %}
 
 <{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
+
+  {% if icon %}
+    {{ icon('navigation', icon, { class: 'toolbar-button__icon', size: 20 }) }}
+  {% endif %}
+
   {% if action %}
     <span data-toolbar-action class="visually-hidden">{{ action }}</span>
   {% endif %}
@@ -32,4 +37,8 @@ appear after main classes #}
     {% endif %}
   {% endblock %}
 
+  {% if modifiers is iterable and ('expand--side' in modifiers or 'expand--down' in modifiers) %}
+    {{ icon('navigation', 'chevron', { class: 'toolbar-button__chevron', size: 16 }) }}
+  {% endif %}
+
 </{{ html_tag|default('button') }}>