diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
index e51c7f214739..d8e1b8c977de 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -10,6 +10,28 @@
   display: block;
 }
 
+// Remove the browser button appearance for action list button items. These
+// buttons should appear as if they were standard Material Design list items.
+.mat-mdc-action-list button.mdc-list-item {
+  background: none;
+  color: inherit;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  -webkit-tap-highlight-color: transparent;
+  // Set the text alignment to "start" as buttons align their content
+  // centered by default. List content is aligned on the start.
+  text-align: left;
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
 // MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
 // cases, we need to make sure it expands to fill the available width.
 .mat-mdc-list-item,
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 05a5e83733f8..036983910040 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -268,7 +268,7 @@ $item-inset-divider-offset: 72px;
   }
 }
 
-mat-action-list {
+.mat-action-list {
   // Remove the native button look and make it look like a list item
   button {
     background: none;
@@ -277,6 +277,8 @@ mat-action-list {
     font: inherit;
     outline: inherit;
     -webkit-tap-highlight-color: transparent;
+    // Set the text alignment to "start" as buttons align their content
+    // centered by default. List content is aligned on the start.
     text-align: left;
 
     [dir='rtl'] & {