fix(material/button): combine MatButton and MatAnchor (#30492)

Currently we have two directives for each button variant: `MatButton` which applies to `button` elements and `MatButtonAnchor` which applies to anchors.

This is problematic in a couple of ways:
1. The styles, which can be non-trivial, are duplicated if both classes are used.
2. Users have to think about which class they're importing.

These changes combine the two classes to resolve the issues and simplify our setup.

BREAKING CHANGE:
`tabindex` values set as `[attr.tabindex]` set on a Material button might not work as expected. Use `tabindex` for static values, or `[tabindex]`/`[tabIndex]` for dynamic ones.

Author: crisbeto

src/material/button/button-base.ts

@@ -19,7 +19,6 @@ import {
   NgZone,
   numberAttribute,
   OnDestroy,
-  OnInit,
   Renderer2,
 } from '@angular/core';
 import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '@angular/material/core';
@@ -52,8 +51,13 @@ export const MAT_BUTTON_HOST = {
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',
   '[class]': 'color ? "mat-" + color : ""',
+  '[attr.tabindex]': '_getTabIndex()',
 };
 
+function transformTabIndex(value: unknown): number | undefined {
+  return value == null ? undefined : numberAttribute(value);
+}
+
 /** List of classes to add to buttons instances based on host attribute selector. */
 const HOST_SELECTOR_MDC_CLASS_PAIR: {attribute: string; mdcClasses: string[]}[] = [
   {
@@ -94,13 +98,18 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
 
   private readonly _focusMonitor = inject(FocusMonitor);
+  private _cleanupClick: (() => void) | undefined;
+  private _renderer = inject(Renderer2);
 
   /**
    * Handles the lazy creation of the MatButton ripple.
    * Used to improve initial load time of large applications.
    */
   protected _rippleLoader: MatRippleLoader = inject(MatRippleLoader);
 
+  /** Whether the button is set on an anchor node. */
+  protected _isAnchor: boolean;
+
   /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
   protected _isFab = false;
 
@@ -153,14 +162,28 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   @Input({transform: booleanAttribute})
   disabledInteractive: boolean;
 
+  /** Tab index for the button. */
+  @Input({transform: transformTabIndex})
+  tabIndex: number;
+
+  /**
+   * Backwards-compatibility input that handles pre-existing `[tabindex]` bindings.
+   * @docs-private
+   */
+  @Input({alias: 'tabindex', transform: transformTabIndex})
+  set _tabindex(value: number) {
+    this.tabIndex = value;
+  }
+
   constructor(...args: unknown[]);
 
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const config = inject(MAT_BUTTON_CONFIG, {optional: true});
-    const element = this._elementRef.nativeElement;
+    const element: HTMLElement = this._elementRef.nativeElement;
     const classList = (element as HTMLElement).classList;
 
+    this._isAnchor = element.tagName === 'A';
     this.disabledInteractive = config?.disabledInteractive ?? false;
     this.color = config?.color ?? null;
     this._rippleLoader?.configureRipple(element, {className: 'mat-mdc-button-ripple'});
@@ -176,9 +199,16 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit() {
     this._focusMonitor.monitor(this._elementRef, true);
+
+    // Some internal tests depend on the timing of this,
+    // otherwise we could bind it in the constructor.
+    if (this._isAnchor) {
+      this._setupAsAnchor();
+    }
   }
 
   ngOnDestroy() {
+    this._cleanupClick?.();
     this._focusMonitor.stopMonitoring(this._elementRef);
     this._rippleLoader?.destroyRipple(this._elementRef.nativeElement);
   }
@@ -197,6 +227,10 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
       return this.ariaDisabled;
     }
 
+    if (this._isAnchor) {
+      return this.disabled || null;
+    }
+
     return this.disabled && this.disabledInteractive ? true : null;
   }
 
@@ -210,74 +244,30 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
       this.disableRipple || this.disabled,
     );
   }
-}
 
-/** Shared host configuration for buttons using the `<a>` tag. */
-export const MAT_ANCHOR_HOST = {
-  // Note that this is basically a noop on anchors,
-  // but it appears that some internal apps depend on it.
-  '[attr.disabled]': '_getDisabledAttribute()',
-  '[class.mat-mdc-button-disabled]': 'disabled',
-  '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
-  '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+  protected _getTabIndex() {
+    if (this._isAnchor) {
+      return this.disabled && !this.disabledInteractive ? -1 : this.tabIndex;
+    }
+    return this.tabIndex;
+  }
 
-  // Note that we ignore the user-specified tabindex when it's disabled for
-  // consistency with the `mat-button` applied on native buttons where even
-  // though they have an index, they're not tabbable.
-  '[attr.tabindex]': 'disabled && !disabledInteractive ? -1 : tabIndex',
-  '[attr.aria-disabled]': '_getAriaDisabled()',
-  // MDC automatically applies the primary theme color to the button, but we want to support
-  // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
-  // select and style this "theme".
-  '[class.mat-unthemed]': '!color',
-  // Add a class that applies to all buttons. This makes it easier to target if somebody
-  // wants to target all Material buttons.
-  '[class.mat-mdc-button-base]': 'true',
-  '[class]': 'color ? "mat-" + color : ""',
-};
+  private _setupAsAnchor() {
+    this._cleanupClick = this._ngZone.runOutsideAngular(() =>
+      this._renderer.listen(this._elementRef.nativeElement, 'click', (event: Event) => {
+        if (this.disabled) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+      }),
+    );
+  }
+}
 
+// tslint:disable:variable-name
 /**
  * Anchor button base.
  */
-@Directive()
-export class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
-  private _renderer = inject(Renderer2);
-  private _cleanupClick: () => void;
-
-  @Input({
-    transform: (value: unknown) => {
-      return value == null ? undefined : numberAttribute(value);
-    },
-  })
-  tabIndex: number;
-
-  ngOnInit(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._cleanupClick = this._renderer.listen(
-        this._elementRef.nativeElement,
-        'click',
-        this._haltDisabledEvents,
-      );
-    });
-  }
-
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this._cleanupClick?.();
-  }
-
-  _haltDisabledEvents = (event: Event): void => {
-    // A disabled button shouldn't apply any actions
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  };
-
-  protected override _getAriaDisabled() {
-    if (this.ariaDisabled != null) {
-      return this.ariaDisabled;
-    }
-    return this.disabled || null;
-  }
-}
+export const MatAnchorBase = MatButtonBase;
+export type MatAnchorBase = MatButtonBase;
+// tslint:enable:variable-name

src/material/button/button.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatAnchorBase, MatButtonBase} from './button-base';
+import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
 
 /**
  * Material Design button component. Users interact with a button to perform an action.
@@ -21,17 +21,19 @@ import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatAnchorBase, MatButtonBase} from './
 @Component({
   selector: `
     button[mat-button], button[mat-raised-button], button[mat-flat-button],
-    button[mat-stroked-button]
+    button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button],
+    a[mat-stroked-button]
   `,
   templateUrl: 'button.html',
   styleUrls: ['button.css', 'button-high-contrast.css'],
   host: MAT_BUTTON_HOST,
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatButton extends MatButtonBase {}
 
+// tslint:disable:variable-name
 /**
  * Material Design button component for anchor elements. Anchor elements are used to provide
  * links for the user to navigate across different routes or pages.
@@ -42,13 +44,6 @@ export class MatButton extends MatButtonBase {}
  * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches
  * "contained" but without elevation.
  */
-@Component({
-  selector: `a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]`,
-  exportAs: 'matButton, matAnchor',
-  host: MAT_ANCHOR_HOST,
-  templateUrl: 'button.html',
-  styleUrls: ['button.css', 'button-high-contrast.css'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatAnchor extends MatAnchorBase {}
+export const MatAnchor = MatButton;
+export type MatAnchor = MatButton;
+// tslint:enable:variable-name

src/material/button/fab.ts

@@ -16,8 +16,7 @@ import {
   inject,
 } from '@angular/core';
 
-import {MatAnchor} from './button';
-import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatButtonBase} from './button-base';
+import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
 import {ThemePalette} from '@angular/material/core';
 
 /** Default FAB options that can be overridden. */
@@ -60,15 +59,15 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY();
  * The `MatFabButton` class has two appearances: normal and extended.
  */
 @Component({
-  selector: `button[mat-fab]`,
+  selector: `button[mat-fab], a[mat-fab]`,
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
   host: {
     ...MAT_BUTTON_HOST,
     '[class.mdc-fab--extended]': 'extended',
     '[class.mat-mdc-extended-fab]': 'extended',
   },
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -94,11 +93,11 @@ export class MatFabButton extends MatButtonBase {
  * See https://material.io/components/buttons-floating-action-button/
  */
 @Component({
-  selector: `button[mat-mini-fab]`,
+  selector: `button[mat-mini-fab], a[mat-mini-fab]`,
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
   host: MAT_BUTTON_HOST,
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -116,66 +115,22 @@ export class MatMiniFabButton extends MatButtonBase {
   }
 }
 
+// tslint:disable:variable-name
 /**
  * Material Design floating action button (FAB) component for anchor elements. Anchor elements
  * are used to provide links for the user to navigate across different routes or pages.
  * See https://material.io/components/buttons-floating-action-button/
  *
  * The `MatFabAnchor` class has two appearances: normal and extended.
  */
-@Component({
-  selector: `a[mat-fab]`,
-  templateUrl: 'button.html',
-  styleUrl: 'fab.css',
-  host: {
-    ...MAT_ANCHOR_HOST,
-    '[class.mdc-fab--extended]': 'extended',
-    '[class.mat-mdc-extended-fab]': 'extended',
-  },
-  exportAs: 'matButton, matAnchor',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatFabAnchor extends MatAnchor {
-  private _options = inject<MatFabDefaultOptions>(MAT_FAB_DEFAULT_OPTIONS, {optional: true});
-
-  override _isFab = true;
-
-  @Input({transform: booleanAttribute}) extended: boolean;
-
-  constructor(...args: unknown[]);
-
-  constructor() {
-    super();
-    this._options = this._options || defaults;
-    this.color = this._options!.color || defaults.color;
-  }
-}
+export const MatFabAnchor = MatFabButton;
+export type MatFabAnchor = MatFabButton;
 
 /**
  * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
  * are used to provide links for the user to navigate across different routes or pages.
  * See https://material.io/components/buttons-floating-action-button/
  */
-@Component({
-  selector: `a[mat-mini-fab]`,
-  templateUrl: 'button.html',
-  styleUrl: 'fab.css',
-  host: MAT_ANCHOR_HOST,
-  exportAs: 'matButton, matAnchor',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatMiniFabAnchor extends MatAnchor {
-  private _options = inject<MatFabDefaultOptions>(MAT_FAB_DEFAULT_OPTIONS, {optional: true});
-
-  override _isFab = true;
-
-  constructor(...args: unknown[]);
-
-  constructor() {
-    super();
-    this._options = this._options || defaults;
-    this.color = this._options!.color || defaults.color;
-  }
-}
+export const MatMiniFabAnchor = MatMiniFabButton;
+export type MatMiniFabAnchor = MatMiniFabButton;
+// tslint:enable:variable-name

src/material/button/icon-button.ts

@@ -7,19 +7,19 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatAnchorBase, MatButtonBase} from './button-base';
+import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
 
 /**
  * Material Design icon button component. This type of button displays a single interactive icon for
  * users to perform an action.
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
 @Component({
-  selector: `button[mat-icon-button]`,
+  selector: `button[mat-icon-button], a[mat-icon-button]`,
   templateUrl: 'icon-button.html',
   styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   host: MAT_BUTTON_HOST,
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -32,18 +32,12 @@ export class MatIconButton extends MatButtonBase {
   }
 }
 
+// tslint:disable:variable-name
 /**
  * Material Design icon button component for anchor elements. This button displays a single
  * interaction icon that allows users to navigate across different routes or pages.
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
-@Component({
-  selector: `a[mat-icon-button]`,
-  templateUrl: 'icon-button.html',
-  styleUrls: ['icon-button.css', 'button-high-contrast.css'],
-  host: MAT_ANCHOR_HOST,
-  exportAs: 'matButton, matAnchor',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatIconAnchor extends MatAnchorBase {}
+export const MatIconAnchor = MatIconButton;
+export type MatIconAnchor = MatIconButton;
+// tslint:enable:variable-name

src/material/button/module.ts

@@ -8,33 +8,19 @@
 
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
-import {MatAnchor, MatButton} from './button';
-import {MatFabAnchor, MatFabButton, MatMiniFabAnchor, MatMiniFabButton} from './fab';
-import {MatIconAnchor, MatIconButton} from './icon-button';
+import {MatButton} from './button';
+import {MatFabButton, MatMiniFabButton} from './fab';
+import {MatIconButton} from './icon-button';
 
 @NgModule({
   imports: [
     MatCommonModule,
     MatRippleModule,
-    MatAnchor,
     MatButton,
-    MatIconAnchor,
-    MatMiniFabAnchor,
     MatMiniFabButton,
     MatIconButton,
-    MatFabAnchor,
     MatFabButton,
   ],
-  exports: [
-    MatAnchor,
-    MatButton,
-    MatIconAnchor,
-    MatIconButton,
-    MatMiniFabAnchor,
-    MatMiniFabButton,
-    MatFabAnchor,
-    MatFabButton,
-    MatCommonModule,
-  ],
+  exports: [MatCommonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButton],
 })
 export class MatButtonModule {}

src/material/datepicker/datepicker-toggle.html

@@ -4,7 +4,7 @@
   type="button"
   [attr.aria-haspopup]="datepicker ? 'dialog' : null"
   [attr.aria-label]="ariaLabel || _intl.openCalendarLabel"
-  [attr.tabindex]="disabled ? -1 : tabIndex"
+  [tabIndex]="disabled ? -1 : tabIndex"
   [attr.aria-expanded]="datepicker ? datepicker.opened : null"
   [disabled]="disabled"
   [disableRipple]="disableRipple">

src/material/timepicker/timepicker-toggle.html

@@ -5,7 +5,7 @@
   [attr.aria-label]="getAriaLabel()"
   [attr.aria-labelledby]="ariaLabelledby()"
   [attr.aria-expanded]="timepicker().isOpen()"
-  [attr.tabindex]="_isDisabled() ? -1 : tabIndex()"
+  [tabIndex]="_isDisabled() ? -1 : tabIndex()"
   [disabled]="_isDisabled()"
   [disableRipple]="disableRipple()">
 

tools/public_api_guard/material/button.md

@@ -13,7 +13,6 @@ import { InjectionToken } from '@angular/core';
 import { MatRippleLoader } from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 
 // @public
@@ -26,17 +25,15 @@ export const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
 export function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
 
 // @public
-export class MatAnchor extends MatAnchorBase {
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchor, never>;
-}
+export const MatAnchor: typeof MatButton;
+
+// @public (undocumented)
+export type MatAnchor = MatButton;
 
 // @public
 export class MatButton extends MatButtonBase {
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", ["matButton"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button],    a[mat-stroked-button]  ", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, never>;
 }
@@ -54,23 +51,14 @@ export class MatButtonModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof i1.MatCommonModule, typeof i1.MatRippleModule, typeof i2.MatAnchor, typeof i2.MatButton, typeof i3.MatIconAnchor, typeof i4.MatMiniFabAnchor, typeof i4.MatMiniFabButton, typeof i3.MatIconButton, typeof i4.MatFabAnchor, typeof i4.MatFabButton], [typeof i2.MatAnchor, typeof i2.MatButton, typeof i3.MatIconAnchor, typeof i3.MatIconButton, typeof i4.MatMiniFabAnchor, typeof i4.MatMiniFabButton, typeof i4.MatFabAnchor, typeof i4.MatFabButton, typeof i1.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof i1.MatCommonModule, typeof i1.MatRippleModule, typeof i2.MatButton, typeof i3.MatMiniFabButton, typeof i4.MatIconButton, typeof i3.MatFabButton], [typeof i1.MatCommonModule, typeof i2.MatButton, typeof i3.MatMiniFabButton, typeof i4.MatIconButton, typeof i3.MatFabButton]>;
 }
 
 // @public
-export class MatFabAnchor extends MatAnchor {
-    constructor(...args: unknown[]);
-    // (undocumented)
-    extended: boolean;
-    // (undocumented)
-    _isFab: boolean;
-    // (undocumented)
-    static ngAcceptInputType_extended: unknown;
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabAnchor, "a[mat-fab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatFabAnchor, never>;
-}
+export const MatFabAnchor: typeof MatFabButton;
+
+// @public (undocumented)
+export type MatFabAnchor = MatFabButton;
 
 // @public
 export class MatFabButton extends MatButtonBase {
@@ -82,7 +70,7 @@ export class MatFabButton extends MatButtonBase {
     // (undocumented)
     static ngAcceptInputType_extended: unknown;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab]", ["matButton"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, never>;
 }
@@ -93,40 +81,33 @@ export interface MatFabDefaultOptions {
 }
 
 // @public
-export class MatIconAnchor extends MatAnchorBase {
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], {}, {}, never, ["*"], true, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatIconAnchor, never>;
-}
+export const MatIconAnchor: typeof MatIconButton;
+
+// @public (undocumented)
+export type MatIconAnchor = MatIconButton;
 
 // @public
 export class MatIconButton extends MatButtonBase {
     constructor(...args: unknown[]);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button], a[mat-icon-button]", ["matButton", "matAnchor"], {}, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, never>;
 }
 
 // @public
-export class MatMiniFabAnchor extends MatAnchor {
-    constructor(...args: unknown[]);
-    // (undocumented)
-    _isFab: boolean;
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabAnchor, "a[mat-mini-fab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabAnchor, never>;
-}
+export const MatMiniFabAnchor: typeof MatMiniFabButton;
+
+// @public (undocumented)
+export type MatMiniFabAnchor = MatMiniFabButton;
 
 // @public
 export class MatMiniFabButton extends MatButtonBase {
     constructor(...args: unknown[]);
     // (undocumented)
     _isFab: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab]", ["matButton"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab], a[mat-mini-fab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, never>;
 }