.

Author: tinayuangao

src/lib/button-toggle/_button-toggle-theme.scss

@@ -1,13 +1,35 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
+// Applies a focus style to an md-button-toggle element for each of the supported palettes.
+@mixin _mat-button-toggle-focus-color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  &.mat-primary .mat-button-toggle-focus-overlay {
+    background-color: mat-color($primary, 0.12);
+  }
+
+  &.mat-accent .mat-button-toggle-focus-overlay {
+    background-color: mat-color($accent, 0.12);
+  }
+
+  &.mat-warn .mat-button-toggle-focus-overlay {
+    background-color: mat-color($warn, 0.12);
+  }
+}
 
 @mixin mat-button-toggle-theme($theme) {
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
   .mat-button-toggle {
     color: mat-color($foreground, hint-text);
+
+    &.cdk-focused {
+      @include _mat-button-toggle-focus-color($theme);
+    }
   }
 
   .mat-button-toggle-checked {

src/lib/button-toggle/button-toggle.ts

@@ -333,6 +333,7 @@ export class MdButtonToggle implements OnInit {
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               public buttonToggleDispatcher: UniqueSelectionDispatcher,
               private _renderer: Renderer,
+              private _elementRef: ElementRef,
               private _focusOriginMonitor: FocusOriginMonitor) {
     this.buttonToggleGroup = toggleGroup;
 
@@ -364,7 +365,7 @@ export class MdButtonToggle implements OnInit {
     if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
       this._checked = true;
     }
-    this._focusOriginMonitor.registerElementForFocusClasses(this._inputElement.nativeElement, this._renderer);
+    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   /** Unique ID for the underlying `input` element. */