fix(tab-button): match height to tab-bar in ionic-md theme

core/src/components/tab-button/tab-button.ionic.scss

@@ -148,3 +148,42 @@
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
   @include globals.position(calc(50% + 14px));
 }
+
+/*
+ * When the icon has a top margin (icon-top layout with both icon and
+ * label), shift the badges down by the same amount so they stay anchored
+ * to the icon visually rather than to the tab-button's outer box.
+ */
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge) {
+  top: calc(globals.$ion-scale-100 * -1);
+}
+
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge:empty) {
+  top: 0;
+}
+
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge.badge-vertical-top) {
+  top: 2px;
+}
+
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge.badge-vertical-top:empty) {
+  top: 0;
+}
+
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge.badge-vertical-bottom) {
+  top: calc(50% - globals.$ion-space-100);
+}
+
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  top: 50%;
+}
+
+/* 
+ * Workaround for a rendering bug in Firefox when the button is shorter than
+ * the tab-bar content area: the button varies in height, causing screenshot
+ * flake. Add margin above the icon to make the button as tall as the
+ * tab-bar's content area.
+*/
+:host(.tab-layout-icon-top.tab-has-icon.tab-has-label) ::slotted(ion-icon) {
+  margin-top: globals.$ion-space-100;
+}