fix(toolbar): align icon-only buttons

demo/src/app/index/pages/toolbar/toolbar.page.html

@@ -41,6 +41,42 @@ <h2>toolbar</h2>
     <ion-title>Primary / Secondary Buttons</ion-title>
   </ion-toolbar>
 
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+      <ion-button fill="solid">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Normal</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button size="small">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+      <ion-button size="small" fill="solid">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Small</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button size="large">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+      <ion-button size="large" fill="solid">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Large</ion-title>
+  </ion-toolbar>
+
   <ion-toolbar color="primary">
     <ion-buttons slot="secondary">
       <ion-button>

src/styles/components/ion-button.scss

@@ -37,6 +37,10 @@
     &::part(native) {
       height: 32px;
     }
+    &.button-has-icon-only {
+      width: 32px;
+      height: 32px;
+    }
     &.button-has-icon-only::part(native) {
       width: 32px;
       height: 32px;
@@ -61,6 +65,10 @@
     &::part(native) {
       height: 56px;
     }
+    &.button-has-icon-only {
+      width: 56px;
+      height: 56px;
+    }
     &.button-has-icon-only::part(native) {
       width: 56px;
       height: 56px;

src/styles/components/ion-toolbar.scss

@@ -5,16 +5,50 @@ ion-footer.md:not(.md3-disabled) {
 
 ion-header.md:not(.md3-disabled),
 ion-footer.md:not(.md3-disabled) {
-  ion-buttons {
-    margin-left: 12px;
-    margin-right: 12px;
+  ion-buttons[slot='start'],
+  ion-back-button[slot='start'] {
+    margin-left: 16px;
   }
-  ion-back-button {
-    margin-left: 12px;
-    margin-right: 12px;
+  ion-buttons[slot='end'],
+  ion-back-button[slot='end'] {
+    margin-right: 16px;
   }
-  ion-toolbar ion-buttons ion-back-button {
+  /* fallback ion-buttons[slot=end], ion-back-button[slot=end] */
+  ion-toolbar ion-buttons > ion-back-button {
     margin-left: 0;
     margin-right: 0;
   }
 }
+
+ion-header.md:not(.md3-disabled) ion-toolbar {
+  &:has([slot='start']) ion-title {
+    padding-inline-start: 4px;
+  }
+  &:not(:has([slot='start'])) ion-title {
+    padding-inline-start: calc(16px + 12px);
+  }
+}
+
+ion-toolbar.md:not(.md3-disabled) {
+  ion-back-button.back-button-has-icon-only {
+    --icon-font-size: 24px;
+    &::part(native) {
+      width: 48px;
+      height: 48px;
+      padding: 0;
+    }
+  }
+
+  ion-button.button-has-icon-only:not(.button-small):not(.button-large) {
+    &::part(native) {
+      width: 48px;
+      height: 48px;
+    }
+    &.button-solid {
+      &::part(native) {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}