Integrate the checkboxes.

Author: crisbeto

src/lib/core/option/_option-theme.scss

@@ -12,13 +12,17 @@
     }
 
     &.md-selected {
-      background: md-color($background, hover);
       color: md-color($primary);
+
+      // In multiple mode there is a checkbox to show that the option is selected.
+      &:not(.md-option-multiple) {
+        background: md-color($background, hover);
+      }
     }
 
     &.md-option-disabled {
       color: md-color($foreground, hint-text);
     }
 
   }
-}
+}

src/lib/core/option/_option.scss

@@ -30,5 +30,14 @@
       opacity: 0.5;
     }
   }
+
+  .md-option-content {
+    vertical-align: middle;
+  }
+
+  // TODO: doesn't handle RTL yet
+  md-pseudo-checkbox {
+    margin-right: $md-menu-side-padding / 2;
+  }
 }
 

src/lib/core/option/option.html

@@ -1,3 +1,5 @@
-<ng-content></ng-content>
+<md-pseudo-checkbox *ngIf="multiple" [state]="selected ? 'checked' : ''"
+    color="primary"></md-pseudo-checkbox>
+<span class="md-option-content"><ng-content></ng-content></span>
 <div class="md-option-ripple" *ngIf="!disabled" md-ripple mdRippleBackgroundColor="rgba(0,0,0,0)"
-     [mdRippleTrigger]="_getHostElement()"></div>
+    [mdRippleTrigger]="_getHostElement()"></div>

src/lib/core/option/option.ts

@@ -13,6 +13,7 @@ import {CommonModule} from '@angular/common';
 import {ENTER, SPACE} from '../keyboard/keycodes';
 import {coerceBooleanProperty} from '../coercion/boolean-property';
 import {MdRippleModule} from '../ripple/ripple';
+import {MdSelectionModule} from '../selection/index';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -36,6 +37,7 @@ export class MdOptionSelectionChange {
     'role': 'option',
     '[attr.tabindex]': '_getTabIndex()',
     '[class.md-selected]': 'selected',
+    '[class.md-option-multiple]': 'multiple',
     '[id]': 'id',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
@@ -138,7 +140,7 @@ export class MdOption {
 }
 
 @NgModule({
-  imports: [MdRippleModule, CommonModule],
+  imports: [MdRippleModule, CommonModule, MdSelectionModule],
   exports: [MdOption],
   declarations: [MdOption]
 })

src/lib/select/index.ts

@@ -2,10 +2,8 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MdSelect} from './select';
 import {MdOptionModule} from '../core/option/option';
-import {
-  CompatibilityModule,
-  OverlayModule,
-} from '../core';
+import {CompatibilityModule, OverlayModule} from '../core';
+
 export * from './select';
 export {fadeInContent, transformPanel, transformPlaceholder} from './select-animations';