fix(material/button): inherit button shape in focus indicator

Updates the button's focus indicator to inherit the shape of its button which looks better than the current approach.

Author: crisbeto

src/material/button/_button-base.scss

@@ -6,7 +6,7 @@
 // color and opacity for states like hover, active, and focus. Additionally, adds styles to the
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
-@mixin mat-private-button-interactive() {
+@mixin mat-private-button-interactive($focus-indicator-inherits-shape: true) {
   -webkit-tap-highlight-color: transparent;
 
   // The ripple container should match the bounds of the entire button.
@@ -50,6 +50,16 @@
   // The focus indicator should match the bounds of the entire button.
   .mat-focus-indicator {
     @include layout-common.fill();
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
+  }
+
+  @if ($focus-indicator-inherits-shape) {
+    .mat-focus-indicator::before {
+      border-radius: inherit;
+    }
   }
 
   &:focus > .mat-focus-indicator::before {

src/material/button/fab.scss

@@ -26,7 +26,8 @@
     transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
 
-  @include button-base.mat-private-button-interactive();
+  // Due to the shape of the FAB, inheriting the shape looks off. Disable it explicitly.
+  @include button-base.mat-private-button-interactive($focus-indicator-inherits-shape: false);
   @include style-private.private-animation-noop();
 
   &::before {