fix(material-experimental/mdc-form-field): incorrect alignment with border-box alignment (#24222)

crisbeto · web-flow · commit b3c957941a14 · 2022-01-24T09:29:25.000-08:00
diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
@@ -87,6 +87,9 @@
 .mat-mdc-form-field-icon-suffix {
   & > .mat-icon {
     padding: 12px;
+    // It's common for apps to apply `box-sizing: border-box`
+    // globally which will break the alignment.
+    box-sizing: content-box;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -87,6 +87,9 @@`
`87`	`87`	`.mat-mdc-form-field-icon-suffix {`
`88`	`88`	`& > .mat-icon {`
`89`	`89`	`padding: 12px;`
	`90`	+ // It's common for apps to apply `box-sizing: border-box`
	`91`	`+ // globally which will break the alignment.`
	`92`	`+ box-sizing: content-box;`
`90`	`93`	`}`
`91`	`94`	`}`
`92`	`95`