diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss
index 10cb01bbee1..fdea4a6037c 100644
--- a/src/lib/core/option/_option.scss
+++ b/src/lib/core/option/_option.scss
@@ -26,6 +26,11 @@
     bottom: 0;
     right: 0;
 
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
+
     // In high contrast mode this completely covers the text.
     @include cdk-high-contrast {
       opacity: 0.5;
diff --git a/src/lib/list/list-item.html b/src/lib/list/list-item.html
index 1d21309ae13..16c46abd0a1 100644
--- a/src/lib/list/list-item.html
+++ b/src/lib/list/list-item.html
@@ -1,5 +1,9 @@
 <div class="mat-list-item-content" [class.mat-list-item-focus]="_hasFocus">
-  <div class="mat-list-item-ripple" md-ripple [mdRippleDisabled]="!isRippleEnabled()"></div>
+  <div class="mat-list-item-ripple" md-ripple
+       [mdRippleTrigger]="_getHostElement()"
+       [mdRippleDisabled]="!isRippleEnabled()">
+  </div>
+
   <ng-content
       select="[md-list-avatar],[md-list-icon], [mat-list-avatar], [mat-list-icon]"></ng-content>
   <div class="mat-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index e4d14fc077c..fd68936906e 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -54,6 +54,11 @@ $mat-dense-list-icon-size: 20px;
     top: 0;
     right: 0;
     bottom: 0;
+
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
   }
 
   &.mat-list-item-avatar .mat-list-item-content {
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index f188934696d..11fb7c4c288 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -172,4 +172,9 @@ export class MdListItem implements AfterContentInit {
   _handleBlur() {
     this._hasFocus = false;
   }
+
+  /** Retrieves the DOM element of the component host. */
+  _getHostElement(): HTMLElement {
+    return this._element.nativeElement;
+  }
 }