fix(ui5-badge): fix icon size (#729)

Author: ilhan007

packages/main/src/themes/Badge.css

@@ -2,32 +2,42 @@
 
 :host(:not([hidden])) {
 	display: inline-flex;
-	height: 1.125rem;
-	min-width: 1.125rem;
+	height: 1.125em;
+	min-width: 1.125em;
 	max-width: 100%;
-	padding: 0 0.625rem;
+	padding: 0 0.625em;
 	color: var(--sapUiBaseText);
 	background: var(--ui5-badge-bg-color-scheme-1);
 	border: solid 1px var(--ui5-badge-border-color-scheme-1);
-	border-radius: 1.125rem;
+	border-radius: 1.125em;
 	box-sizing: border-box;
-	font-size: var(--sapMFontSmallSize);
+	font-size: var(--ui5-badge-font-size); /* origin from --sapMFontSmallSize (0.75rem) */
 	font-family: var(--sapUiFontFamily);
 	text-align: center;
 }
 
 /* Bagde with Icon */
 :host([__has-icon]) {
-	padding: 0 0.3125rem;
+	padding: 0 0.3125em;
+}
+
+::slotted(ui5-icon) {
+	width: 0.75em;
+	height: 0.75em;
+	flex-shrink: 0;
+}
+
+.ui5-badge-text {
+	font-size: .75em;
 }
 
 :host([__has-icon]) .ui5-badge-text {
-	padding-left: 0.1875rem;
+	padding-left: 0.1875em;
 }
 
 /* RTL */
 :host([__has-icon]) .ui5-badge-root[rtl] .ui5-badge-text {
-	padding-right: 0.1875rem;
+	padding-right: 0.1875em;
 }
 
 /* Scheme 1 */
@@ -103,38 +113,44 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	text-transform: uppercase;
-	letter-spacing: 0.0125rem;
+	letter-spacing: 0.0125em;
 }
 
 /* ================================== */
 /* ======= IE pair of styles ======== */
 /* ================================== */
 ui5-badge:not([hidden]) {
 	display: inline-flex;
-	height: 1.125rem;
-	min-width: 1.125rem;
+	height: 1.125em;
+	min-width: 1.125em;
 	max-width: 100%;
-	padding: 0 0.625rem;
+	padding: 0 0.625em;
 	color: var(--sapUiBaseText);
 	background: var(--ui5-badge-bg-color-scheme-1);
 	border: solid 1px var(--ui5-badge-border-color-scheme-1);
-	border-radius: 1.125rem;
+	border-radius: 1.125em;
 	box-sizing: border-box;
-	font-size: var(--sapMFontSmallSize);
+	font-size: var(--ui5-badge-font-size);
 	font-family: var(--sapUiFontFamily);
 	text-align: center;
 }
 
 ui5-badge[__has-icon] {
-	padding: 0 0.3125rem;
+	padding: 0 0.3125em;
+}
+
+ui5-badge ui5-icon {
+	width: .75em;
+	height: .75em;
+	flex-shrink: 0;
 }
 
 ui5-badge[__has-icon] .ui5-badge-text {
-	padding-left: 0.1875rem;
+	padding-left: 0.1875em;
 }
 
 ui5-badge[__has-icon] .ui5-badge-root[rtl] .ui5-badge-text {
-	padding-right: 0.1875rem;
+	padding-right: 0.1875em;
 }
 
 /* Scheme 1 */

packages/main/src/themes/base/Badge-parameters.css

@@ -1,4 +1,5 @@
 :root {
+	--ui5-badge-font-size: 0.75em; /* origin from --sapMFontSmallSize (0.75rem) */
 	--ui5-badge-bg-color-scheme-1: var(--sapUiAccent1Lighten50);
 	--ui5-badge-border-color-scheme-1: var(--sapUiAccent1);
 	--ui5-badge-bg-color-scheme-2: var(--sapUiAccent2Lighten40);