diff --git a/src/dev-app/button/BUILD.bazel b/src/dev-app/button/BUILD.bazel
index c94c68c9b705..fe4c5d24315a 100644
--- a/src/dev-app/button/BUILD.bazel
+++ b/src/dev-app/button/BUILD.bazel
@@ -15,6 +15,7 @@ ng_project(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/icon",
+        "//src/material/progress-spinner",
         "//src/material/tooltip",
     ],
 )
diff --git a/src/dev-app/button/button-demo.html b/src/dev-app/button/button-demo.html
index 2d96f2740820..7e70494a204c 100644
--- a/src/dev-app/button/button-demo.html
+++ b/src/dev-app/button/button-demo.html
@@ -23,20 +23,20 @@ <h4 class="demo-section-header">Buttons</h4>
         [matButton]="appearance"
         disabled
         [disabledInteractive]="disabledInteractive"
-        [matTooltip]="tooltipText">{{appearance}}</button>
+        [matTooltip]="tooltipText"
+      >
+        {{appearance}}
+      </button>
     }
-    <button
-      matFab
-      disabled
-      [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+    <button matFab disabled [disabledInteractive]="disabledInteractive" [matTooltip]="tooltipText">
       <mat-icon>check</mat-icon>
     </button>
     <button
       matMiniFab
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+      [matTooltip]="tooltipText"
+    >
       <mat-icon>check</mat-icon>
     </button>
     <button
@@ -44,13 +44,74 @@ <h4 class="demo-section-header">Buttons</h4>
       extended
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">Search</button>
+      [matTooltip]="tooltipText"
+    >
+      Search
+    </button>
     <button
       matFab
       extended
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+      [matTooltip]="tooltipText"
+    >
+      <mat-icon>check</mat-icon>
+      Search
+      <mat-icon iconPositionEnd>check</mat-icon>
+    </button>
+  </section>
+  <section>
+    @for (appearance of appearances; track $index) {
+      <button [matButton]="appearance" [showProgress]="true">
+        {{appearance}}
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        >
+        </mat-progress-spinner>
+      </button>
+    }
+    <button matFab [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      <mat-icon>check</mat-icon>
+    </button>
+    <button matMiniFab [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      <mat-icon>check</mat-icon>
+    </button>
+    <button matFab extended [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      Search
+    </button>
+    <button matFab extended [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
       <mat-icon>check</mat-icon>
       Search
       <mat-icon iconPositionEnd>check</mat-icon>
@@ -82,32 +143,41 @@ <h4 class="demo-section-header">Anchors</h4>
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
       matButton
-      color="primary">SEARCH</a>
+      color="primary"
+      >SEARCH</a
+    >
     <a
       href="//www.google.com"
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
-      matButton="elevated">SEARCH</a>
+      matButton="elevated"
+      >SEARCH</a
+    >
     <a
       href="//www.google.com"
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
       matButton="outlined"
-      color="primary">SEARCH</a>
+      color="primary"
+      >SEARCH</a
+    >
     <a
       href="//www.google.com"
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
-      matButton="filled">SEARCH</a>
+      matButton="filled"
+      >SEARCH</a
+    >
     <a
       href="//www.google.com"
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
-      matFab>
+      matFab
+    >
       <mat-icon>check</mat-icon>
     </a>
     <a
@@ -115,7 +185,8 @@ <h4 class="demo-section-header">Anchors</h4>
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
-      matMiniFab>
+      matMiniFab
+    >
       <mat-icon>check</mat-icon>
     </a>
     <a
@@ -124,14 +195,17 @@ <h4 class="demo-section-header">Anchors</h4>
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
       matFab
-      extended>Search</a>
+      extended
+      >Search</a
+    >
     <a
       href="//www.google.com"
       disabled
       [disabledInteractive]="disabledInteractive"
       [matTooltip]="tooltipText"
       matFab
-      extended>
+      extended
+    >
       <mat-icon>check</mat-icon>
       Search
       <mat-icon iconPositionEnd>check</mat-icon>
@@ -139,7 +213,9 @@ <h4 class="demo-section-header">Anchors</h4>
   </section>
 
   @for (appearance of appearances; track $index) {
-    <h4 class="demo-section-header"><code>{{appearance}}</code> Appearance</h4>
+    <h4 class="demo-section-header">
+      <code>{{appearance}}</code> Appearance
+    </h4>
     <section>
       <button [matButton]="appearance">unthemed</button>
       <button [matButton]="appearance" color="primary">primary</button>
@@ -149,7 +225,10 @@ <h4 class="demo-section-header"><code>{{appearance}}</code> Appearance</h4>
         [matButton]="appearance"
         disabled
         [disabledInteractive]="disabledInteractive"
-        [matTooltip]="tooltipText">disabled</button>
+        [matTooltip]="tooltipText"
+      >
+        disabled
+      </button>
       <button [matButton]="appearance">
         <mat-icon>home</mat-icon>
         with icons
@@ -159,6 +238,17 @@ <h4 class="demo-section-header"><code>{{appearance}}</code> Appearance</h4>
         <mat-icon>home</mat-icon>
         with icons
       </button>
+      <button [matButton]="appearance" [showProgress]="true">
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
+        <mat-icon>home</mat-icon>
+        with icons
+      </button>
     </section>
   }
 
@@ -180,9 +270,20 @@ <h4 class="demo-section-header">Icon Buttons</h4>
       matIconButton
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+      [matTooltip]="tooltipText"
+    >
       <mat-icon>visibility</mat-icon>
     </button>
+    <button matIconButton color="warn" [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      <mat-icon>trending_up</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Icon Button Anchors</h4>
@@ -204,7 +305,8 @@ <h4 class="demo-section-header">Icon Button Anchors</h4>
       matIconButton
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+      [matTooltip]="tooltipText"
+    >
       <mat-icon>visibility</mat-icon>
     </a>
   </section>
@@ -223,13 +325,19 @@ <h4 class="demo-section-header">FABs</h4>
     <button matFab color="warn">
       <mat-icon>home</mat-icon>
     </button>
-    <button
-      matFab
-      disabled
-      [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+    <button matFab disabled [disabledInteractive]="disabledInteractive" [matTooltip]="tooltipText">
       <mat-icon>favorite</mat-icon>
     </button>
+    <button matFab color="warn" [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      <mat-icon>home</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Mini FABs</h4>
@@ -246,11 +354,22 @@ <h4 class="demo-section-header">Mini FABs</h4>
     <button matMiniFab color="warn">
       <mat-icon>filter_list</mat-icon>
     </button>
+    <button matMiniFab color="warn" [showProgress]="true">
+      <mat-progress-spinner
+        progressIndicator
+        mode="indeterminate"
+        diameter="20"
+        aria-label="Loading"
+        tabindex=""
+      />
+      <mat-icon>filter_list</mat-icon>
+    </button>
     <button
       matMiniFab
       disabled
       [disabledInteractive]="disabledInteractive"
-      [matTooltip]="tooltipText">
+      [matTooltip]="tooltipText"
+    >
       <mat-icon>home</mat-icon>
     </button>
   </section>
@@ -261,37 +380,106 @@ <h4 class="demo-section-header">Interaction/State</h4>
       <p>isDisabled: {{isDisabled}}</p>
       <p>Button 1 as been clicked {{clickCounter}} times</p>
       <p>
-        <mat-checkbox [(ngModel)]="disabledInteractive">Allow disabled button interactivity</mat-checkbox>
+        <mat-checkbox [(ngModel)]="disabledInteractive"
+          >Allow disabled button interactivity</mat-checkbox
+        >
       </p>
       <p>
         <mat-checkbox [(ngModel)]="isDisabled">All disabled</mat-checkbox>
       </p>
+      <p>
+        <mat-checkbox [(ngModel)]="showProgress">All showProgress</mat-checkbox>
+      </p>
       <button matButton="filled" (click)="button1.focus()">Focus 1</button>
       <button matButton="filled" (click)="button2.focus()">Focus 2</button>
       <button matButton="filled" (click)="button3.focus()">Focus 3</button>
       <button matButton="filled" (click)="button4.focus()">Focus 4</button>
     </div>
     <div>
-      <button matButton #button1 [disabled]="isDisabled"
-              (click)="clickCounter=clickCounter+1">
+      <button
+        matButton
+        #button1
+        [disabled]="isDisabled"
+        [showProgress]="showProgress"
+        (click)="clickCounter=clickCounter+1"
+      >
         Button 1
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </button>
-      <button matButton #button2 color="primary" [disabled]="isDisabled">
+      <button
+        matButton
+        #button2
+        color="primary"
+        [disabled]="isDisabled"
+        [showProgress]="showProgress"
+      >
         Button 2
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </button>
-      <a href="//www.google.com" #button3 matButton color="accent"
-         [disabled]="isDisabled">
+      <a
+        href="//www.google.com"
+        #button3
+        matButton
+        color="accent"
+        [disabled]="isDisabled"
+        [showProgress]="showProgress"
+      >
         Button 3
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </a>
-      <button matButton="elevated" #button4 color="primary"
-              [disabled]="isDisabled">
+      <button
+        matButton="elevated"
+        #button4
+        color="primary"
+        [disabled]="isDisabled"
+        [showProgress]="showProgress"
+      >
         Button 4
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </button>
-      <button matMiniFab [disabled]="isDisabled">
+      <button matMiniFab [disabled]="isDisabled" [showProgress]="showProgress">
         <mat-icon>check</mat-icon>
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </button>
-      <button matIconButton color="accent" [disabled]="isDisabled">
+      <button matIconButton color="accent" [disabled]="isDisabled" [showProgress]="showProgress">
         <mat-icon>favorite</mat-icon>
+        <mat-progress-spinner
+          progressIndicator
+          mode="indeterminate"
+          diameter="20"
+          aria-label="Loading"
+          tabindex=""
+        />
       </button>
     </div>
   </section>
diff --git a/src/dev-app/button/button-demo.ts b/src/dev-app/button/button-demo.ts
index b8b8fa4b42f3..79725c59bbb7 100644
--- a/src/dev-app/button/button-demo.ts
+++ b/src/dev-app/button/button-demo.ts
@@ -21,6 +21,7 @@ import {
 } from '@angular/material/button';
 import {MatCheckbox} from '@angular/material/checkbox';
 import {MatIcon} from '@angular/material/icon';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
 import {MatTooltip} from '@angular/material/tooltip';
 
 @Component({
@@ -28,23 +29,25 @@ import {MatTooltip} from '@angular/material/tooltip';
   templateUrl: 'button-demo.html',
   styleUrl: 'button-demo.css',
   imports: [
-    MatButton,
+    FormsModule,
     MatAnchor,
-    MatFabButton,
+    MatButton,
+    MatCheckbox,
     MatFabAnchor,
-    MatMiniFabButton,
-    MatMiniFabAnchor,
-    MatIconButton,
-    MatIconAnchor,
+    MatFabButton,
     MatIcon,
+    MatIconAnchor,
+    MatIconButton,
+    MatMiniFabAnchor,
+    MatMiniFabButton,
+    MatProgressSpinner,
     MatTooltip,
-    MatCheckbox,
-    FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonDemo {
   isDisabled = false;
+  showProgress = false;
   clickCounter = 0;
   toggleDisable = false;
   tooltipText = 'This is a button tooltip!';
diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel
index 9e35c2644dd7..9671cabd541c 100644
--- a/src/material/button/BUILD.bazel
+++ b/src/material/button/BUILD.bazel
@@ -135,6 +135,7 @@ sass_binary(
         "//src/material/core/style:private",
         "//src/material/core/style:vendor_prefixes",
         "//src/material/core/tokens:token_utils",
+        "//src/material/progress-spinner:theme",
     ],
 )
 
diff --git a/src/material/button/_m3-button.scss b/src/material/button/_m3-button.scss
index 4d52673eb524..a388b17234cc 100644
--- a/src/material/button/_m3-button.scss
+++ b/src/material/button/_m3-button.scss
@@ -63,6 +63,7 @@
       button-filled-pressed-state-layer-opacity:map.get($system, pressed-state-layer-opacity),
       button-filled-ripple-color: m3-utils.color-with-opacity(
           map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+      button-filled-progress-active-indicator-color: map.get($system, on-primary),
       button-filled-state-layer-color: map.get($system, on-primary),
       button-outlined-disabled-label-text-color:
           m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
index c4e6957ef140..2c48ba787740 100644
--- a/src/material/button/button-base.ts
+++ b/src/material/button/button-base.ts
@@ -14,6 +14,7 @@ import {
   ElementRef,
   inject,
   InjectionToken,
+  input,
   Input,
   NgZone,
   numberAttribute,
@@ -55,6 +56,7 @@ function transformTabIndex(value: unknown): number | undefined {
     // wants to target all Material buttons.
     'class': 'mat-mdc-button-base',
     '[class]': 'color ? "mat-" + color : ""',
+    '[class.mat-mdc-button-progress-indicator-shown]': 'showProgress()',
     '[attr.disabled]': '_getDisabledAttribute()',
     '[attr.aria-disabled]': '_getAriaDisabled()',
     '[attr.tabindex]': '_getTabIndex()',
@@ -150,6 +152,9 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
     this.tabIndex = value;
   }
 
+  /** Whether the button is showing a progress indicator. */
+  readonly showProgress = input(false, {transform: booleanAttribute});
+
   constructor(...args: unknown[]);
 
   constructor() {
diff --git a/src/material/button/button.html b/src/material/button/button.html
index 0ddd2794ef91..b03f650aeb8f 100644
--- a/src/material/button/button.html
+++ b/src/material/button/button.html
@@ -1,16 +1,27 @@
 <span
-    class="mat-mdc-button-persistent-ripple"
-    [class.mdc-button__ripple]="!_isFab"
-    [class.mdc-fab__ripple]="_isFab"></span>
+  class="mat-mdc-button-persistent-ripple"
+  [class.mdc-button__ripple]="!_isFab"
+  [class.mdc-fab__ripple]="_isFab"
+></span>
 
-<ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])">
+<ng-content
+  select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])"
+>
 </ng-content>
 
 <span class="mdc-button__label"><ng-content></ng-content></span>
 
-<ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]">
+<ng-content
+  select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"
+>
 </ng-content>
 
+@if (showProgress()) {
+  <div class="mat-mdc-button-progress-indicator-container">
+    <ng-content select="[progressIndicator]" />
+  </div>
+}
+
 <!--
   The indicator can't be directly on the button, because MDC uses ::before for high contrast
   indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index aca34d9ab351..8513604ed70e 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -133,6 +133,12 @@ $fallbacks: m3-button.get-tokens();
     border-radius: token-utils.slot(button-filled-container-shape, $fallbacks);
   }
 
+  .mat-mdc-button-progress-indicator-container {
+    @include progress-spinner-theme.overrides((active-indicator-color: token-utils.slot(button-filled-progress-active-indicator-color,
+          $fallbacks ),
+      ));
+  }
+
   // We need to re-apply the disabled tokens since MDC uses
   // `:disabled` which doesn't apply to anchors.
   @include button-base.mat-private-button-disabled {
@@ -327,3 +333,24 @@ $fallbacks: m3-button.get-tokens();
   $offset: calc(#{$border-width} + 3px);
   margin: calc(#{$offset} * -1);
 }
+
+.mat-mdc-button-progress-indicator-container {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.mat-mdc-button-progress-indicator-shown {
+  .material-icons,
+  mat-icon,
+  [matButtonIcon],
+  .mdc-button__label {
+    visibility: hidden;
+  }
+}
\ No newline at end of file
diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts
index 61d7addb5e1d..b3c1a15b2e18 100644
--- a/src/material/button/button.spec.ts
+++ b/src/material/button/button.spec.ts
@@ -130,6 +130,24 @@ describe('MatButton', () => {
         .withContext('Expected fab buttons to use accent palette by default')
         .toContain('mat-accent');
     });
+
+    it('should show progress indicator when showProgress is true', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!;
+
+      expect(fabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
+      expect(fabButtonDebugEl.nativeElement.classList).not.toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+      fixture.componentInstance.showProgress = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(fabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
+      expect(fabButtonDebugEl.nativeElement.classList).toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+    });
   });
 
   describe('button[mat-mini-fab]', () => {
@@ -143,6 +161,24 @@ describe('MatButton', () => {
         .withContext('Expected mini-fab buttons to use accent palette by default')
         .toContain('mat-accent');
     });
+
+    it('should show progress indicator when showProgress is true', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-mini-fab]'))!;
+
+      expect(miniFabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
+      expect(miniFabButtonDebugEl.nativeElement.classList).not.toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+      fixture.componentInstance.showProgress = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(miniFabButtonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
+      expect(miniFabButtonDebugEl.nativeElement.classList).toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+    });
   });
 
   describe('button[mat-fab] extended', () => {
@@ -202,6 +238,24 @@ describe('MatButton', () => {
         .withContext('Expected button to be disabled')
         .toBeTruthy();
     });
+
+    it('should show progress indicator when showProgress is true', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const buttonDebugEl = fixture.debugElement.query(By.css('button'))!;
+
+      expect(buttonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
+      expect(buttonDebugEl.nativeElement.classList).not.toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+      fixture.componentInstance.showProgress = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(buttonDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
+      expect(buttonDebugEl.nativeElement.classList).toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+    });
   });
 
   // Anchor button tests
@@ -289,6 +343,24 @@ describe('MatButton', () => {
       expect(buttonElement.hasAttribute('tabindex')).toBe(false);
     });
 
+    it('should show progress indicator when showProgress is true', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const anchorDebugEl = fixture.debugElement.query(By.css('a'))!;
+
+      expect(anchorDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(0);
+      expect(anchorDebugEl.nativeElement.classList).not.toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+      fixture.componentInstance.showProgress = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(anchorDebugEl.queryAll(By.css('[progressIndicator]')).length).toBe(1);
+      expect(anchorDebugEl.nativeElement.classList).toContain(
+        'mat-mdc-button-progress-indicator-shown',
+      );
+    });
+
     describe('change detection behavior', () => {
       it('should not run change detection for disabled anchor but should prevent the default behavior and stop event propagation', () => {
         const appRef = TestBed.inject(ApplicationRef);
@@ -445,16 +517,26 @@ describe('MatFabDefaultOptions', () => {
   template: `
     <button [tabIndex]="tabIndex" mat-button type="button" (click)="increment()"
       [disabled]="isDisabled" [color]="buttonColor" [disableRipple]="rippleDisabled"
-      [disabledInteractive]="disabledInteractive">
+      [disabledInteractive]="disabledInteractive"
+      [showProgress]="showProgress">
       Go
+      <span progressIndicator>Progress...</span>
     </button>
     <a [tabIndex]="tabIndex" href="https://www.google.com" mat-button [disabled]="isDisabled"
-      [color]="buttonColor" [disabledInteractive]="disabledInteractive">
+      [color]="buttonColor" [disabledInteractive]="disabledInteractive"
+      [showProgress]="showProgress">
       Link
+      <span progressIndicator>Progress...</span>
     </a>
-    <button mat-fab>Fab Button</button>
+    <button mat-fab [showProgress]="showProgress">
+      Fab Button
+      <span progressIndicator>Progress...</span>
+    </button>
     <button mat-fab [extended]="extended" class="extended-fab-test">Extended</button>
-    <button mat-mini-fab>Mini Fab Button</button>
+    <button mat-mini-fab [showProgress]="showProgress">
+      Mini Fab Button
+      <span progressIndicator>Progress...</span>
+    </button>
     <button class="dynamic" [matButton]="appearance">Dynamic button</button>
     <button class="default-appearance" matButton>Dynamic button</button>
   `,
@@ -469,6 +551,7 @@ class TestApp {
   extended = false;
   disabledInteractive = false;
   appearance: MatButtonAppearance = 'text';
+  showProgress = false;
 
   increment() {
     this.clickCount++;
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index de6e03f23c1e..81d5aa5caed9 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -229,3 +229,23 @@ $fallbacks: m3-fab.get-tokens();
   }
 }
 
+.mat-mdc-button-progress-indicator-container {
+  position: absolute;
+  inset-inline-start: 0;
+  margin-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.mat-mdc-button-progress-indicator-shown {
+  .material-icons,
+  mat-icon,
+  [matButtonIcon],
+  .mdc-button__label {
+    visibility: hidden;
+  }
+}
diff --git a/src/material/button/icon-button.html b/src/material/button/icon-button.html
index c40c3f3ab137..762a605197a0 100644
--- a/src/material/button/icon-button.html
+++ b/src/material/button/icon-button.html
@@ -2,6 +2,12 @@
 
 <ng-content></ng-content>
 
+@if (showProgress()) {
+  <div class="mat-mdc-button-progress-indicator-container">
+    <ng-content select="[progressIndicator]" />
+  </div>
+}
+
 <!--
   The indicator can't be directly on the button, because MDC uses ::before for high contrast
   indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
index 9bc5f212c2b0..4f7d4b88c56c 100644
--- a/src/material/button/icon-button.scss
+++ b/src/material/button/icon-button.scss
@@ -62,7 +62,7 @@ $fallbacks: m3-icon-button.get-tokens();
 ;
 
   img,
-  svg {
+  svg:not(.mat-mdc-button-progress-indicator-container *) {
     width: token-utils.slot(icon-button-icon-size, $fallbacks);
     height: token-utils.slot(icon-button-icon-size, $fallbacks);
     vertical-align: baseline;
@@ -90,3 +90,21 @@ $fallbacks: m3-icon-button.get-tokens();
   }
 }
 
+.mat-mdc-button-progress-indicator-container {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.mat-mdc-button-progress-indicator-shown {
+  .material-icons,
+  mat-icon {
+    visibility: hidden;
+  }
+}
diff --git a/src/material/button/testing/button-harness.spec.ts b/src/material/button/testing/button-harness.spec.ts
index e63fd6bec0f8..dd51f6572047 100644
--- a/src/material/button/testing/button-harness.spec.ts
+++ b/src/material/button/testing/button-harness.spec.ts
@@ -21,7 +21,7 @@ describe('MatButtonHarness', () => {
 
   it('should load all button harnesses', async () => {
     const buttons = await loader.getAllHarnesses(MatButtonHarness);
-    expect(buttons.length).toBe(18);
+    expect(buttons.length).toBe(22);
   });
 
   it('should load button with exact text', async () => {
@@ -40,7 +40,7 @@ describe('MatButtonHarness', () => {
   it('should filter by whether a button is disabled', async () => {
     const enabledButtons = await loader.getAllHarnesses(MatButtonHarness.with({disabled: false}));
     const disabledButtons = await loader.getAllHarnesses(MatButtonHarness.with({disabled: true}));
-    expect(enabledButtons.length).toBe(16);
+    expect(enabledButtons.length).toBe(20);
     expect(disabledButtons.length).toBe(2);
   });
 
@@ -138,12 +138,16 @@ describe('MatButtonHarness', () => {
       'mini-fab',
       'basic',
       'basic',
+      'icon',
+      'basic',
       'basic',
       'basic',
       'basic',
       'basic',
       'icon',
       'fab',
+      'fab',
+      'mini-fab',
       'mini-fab',
     ]);
   });
@@ -164,6 +168,8 @@ describe('MatButtonHarness', () => {
       null,
       'text',
       'text',
+      null,
+      'text',
       'filled',
       'elevated',
       'outlined',
@@ -171,6 +177,8 @@ describe('MatButtonHarness', () => {
       null,
       null,
       null,
+      null,
+      null,
     ]);
   });
 
@@ -192,6 +200,28 @@ describe('MatButtonHarness', () => {
     fixture.componentInstance.dynamicAppearance.set('filled');
     expect(await button.getAppearance()).toBe('filled');
   });
+
+  it('should be able to tell if a button is showing a progress indicator', async () => {
+    const buttonWithIndicator = await loader.getHarness(
+      MatButtonHarness.with({selector: '#with-progress-indicator'}),
+    );
+    const iconButtonWithIndicator = await loader.getHarness(
+      MatButtonHarness.with({selector: '#icon-with-progress-indicator'}),
+    );
+    const fabAnchorWithIndicator = await loader.getHarness(
+      MatButtonHarness.with({selector: '#anchor-fab-with-progress-indicator'}),
+    );
+    const miniFabAnchorWithIndicator = await loader.getHarness(
+      MatButtonHarness.with({selector: '#anchor-mini-fab-with-progress-indicator'}),
+    );
+    const regularButton = await loader.getHarness(MatButtonHarness.with({selector: '#basic'}));
+
+    expect(await buttonWithIndicator.isShowingProgress()).toBe(true);
+    expect(await iconButtonWithIndicator.isShowingProgress()).toBe(true);
+    expect(await fabAnchorWithIndicator.isShowingProgress()).toBe(true);
+    expect(await miniFabAnchorWithIndicator.isShowingProgress()).toBe(true);
+    expect(await regularButton.isShowingProgress()).toBe(false);
+  });
 });
 
 @Component({
@@ -216,6 +246,14 @@ describe('MatButtonHarness', () => {
     <button id="fab" type="button" matFab>Fab button</button>
     <button id="mini-fab" type="button" matMiniFab>Mini Fab button</button>
     <button id="submit" type="submit" matButton>Submit button</button>
+    <button id="with-progress-indicator" type="button" matButton showProgress>
+      Button with progress indicator
+      <div progressIndicator></div>
+    </button>
+    <button id="icon-with-progress-indicator" type="button" matIconButton showProgress>
+      <mat-icon>home</mat-icon>
+      <div progressIndicator></div>
+    </button>
 
     <a id="anchor-basic" matButton>Basic anchor</a>
     <a id="anchor-flat" matButton="filled">Filled anchor</a>
@@ -224,7 +262,15 @@ describe('MatButtonHarness', () => {
     <a id="dynamic-appearance" [matButton]="dynamicAppearance()">Stroked anchor</a>
     <a id="anchor-icon" matIconButton>Icon anchor</a>
     <a id="anchor-fab" matFab>Fab anchor</a>
-    <a id="anchor-mini-fab" matMiniFab>Mini Fab anchor</a>
+    <a id="anchor-fab-with-progress-indicator" matFab showProgress>
+      Fab anchor with progress indicator
+      <div progressIndicator></div>
+    </a>
+    <a id="anchor-mini-fab" matMiniFab showProgress>Mini Fab anchor</a>
+    <a id="anchor-mini-fab-with-progress-indicator" matMiniFab showProgress>
+      Mini Fab anchor with progress indicator
+      <div progressIndicator></div>
+    </a>
   `,
   imports: [MatButtonModule, MatIconModule],
 })
diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts
index 7f3ba9eacff9..d3e01d3435a2 100644
--- a/src/material/button/testing/button-harness.ts
+++ b/src/material/button/testing/button-harness.ts
@@ -66,6 +66,8 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
       });
   }
 
+  private readonly progressIndicator = this.locatorForOptional('[progressIndicator]');
+
   /**
    * Clicks the button at the given position relative to its top-left.
    * @param relativeX The relative x position of the click.
@@ -109,6 +111,11 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
     return (await this.host()).isFocused();
   }
 
+  /** Whether the button is showing a progress indicator. */
+  async isShowingProgress(): Promise<boolean> {
+    return (await this.progressIndicator()) !== null;
+  }
+
   /** Gets the variant of the button. */
   async getVariant(): Promise<ButtonVariant> {
     const host = await this.host();