Bug 1803857 - Add icons to unified toolbar customization space tabs. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D163756

--HG--
extra : rebase_source : 685e9ebdca7258ecfa2772c3ec671a3c208f389e
extra : histedit_source : 2673396d2951cf001ee2d5504d1f153c7373346a

mail/components/unifiedToolbar/content/unifiedToolbarTemplates.inc.xhtml

@@ -84,7 +84,7 @@
 <html:template id="unifiedToolbarTabTemplate"
                xmlns="http://www.w3.org/1999/xhtml">
   <button role="tab">
-    <img alt="" src="" />
+    <img alt="" src="" part="icon" />
     <slot></slot>
   </button>
 </html:template>

mail/themes/shared/mail/unifiedToolbar.css

@@ -95,3 +95,33 @@ unified-toolbar-customization {
 unified-toolbar-customization-pane {
   flex-grow: 1;
 }
+
+unified-toolbar-tab::part(icon) {
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+#unified-toolbar-customization-tab-mail::part(icon) {
+  content: var(--icon-mail);
+}
+
+#unified-toolbar-customization-tab-calendar::part(icon) {
+  content: var(--icon-calendar);
+}
+
+#unified-toolbar-customization-tab-tasks::part(icon) {
+  content: var(--icon-tasks);
+}
+
+#unified-toolbar-customization-tab-addressbook::part(icon) {
+  content: var(--icon-address-book);
+}
+
+#unified-toolbar-customization-tab-chat::part(icon) {
+  content: var(--icon-chat);
+}
+
+#unified-toolbar-customization-tab-settings::part(icon) {
+  content: var(--icon-settings);
+}

mail/themes/shared/mail/unifiedToolbarTab.css

@@ -11,7 +11,9 @@ button {
   appearance: none;
   border: none;
   background: none;
-  display: block;
+  display: flex;
+  align-content: center;
+  gap: 6px;
 }
 
 button[aria-selected="true"] {