angular · devtanish · Jun 13, 2025
@@ -840,7 +840,7 @@
 ### button
 | Commit | Type | Description |
 | -- | -- | -- |
-| [421dd12859](https://github.com/angular/components/commit/421dd1285980633d79e3dcea249cad7344be14fb) | fix | fix color of mat-button links ([#876](https://github.com/angular/components/pull/876)) |
+| [421dd12859](https://github.com/angular/components/commit/421dd1285980633d79e3dcea249cad7344be14fb) | fix | fix color of matButton links ([#876](https://github.com/angular/components/pull/876)) |
 ### categories
 | Commit | Type | Description |
 | -- | -- | -- |
@@ -1142,7 +1142,7 @@
   * The `MapMarkerClusterer` class has been renamed to `DeprecatedMapMarkerClusterer`.
   * The `map-marker-clusterer` selector has been changed to `deprecated-map-marker-clusterer`.
 ### multiple
-- * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --mat-button-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --mat-button-color: red; }`.
+- * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --matButton-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --matButton-color: red; }`.
 - * `MatButton.ripple` is no longer available.
   * `MatCheckbox.ripple` is no longer available.
   * `MatChip.ripple` is no longer available.
@@ -3285,9 +3285,9 @@ Andy Chrzaszcz, Bobby Galli, Joey Perrott, Kristiyan Kostadinov, Miles Malerba,
 
 - The following components have been re-implemented based on MDC:
   - `mat-autocomplete`
-  - `mat-button`
+  - `matButton`
   - `mat-fab`
-  - `mat-icon-button`
+  - `matIconButton`
   - `mat-card`
   - `mat-chip-list` (now split into the following three components: `mat-chip-set`, `mat-chip-listbox`, and `mat-chip-grid` to better represent the different interaction patterns)
   - `mat-option`

@@ -445,7 +445,7 @@ This contains changes before 12.0.0. See [CHANGELOG.md](https://github.com/angul
 |            |                       |
 | ---------- | --------------------- |
 | bug fix |  **autocomplete:** activate first enabled option with autoActiveFirstOption ([#21513](https://github.com/angular/components/issues/21513)) ([032c317d40e7d073755b769674effaf21f9e8944](https://github.com/angular/components/commit/032c317d40e7d073755b769674effaf21f9e8944)), closes [#21498](https://github.com/angular/components/issues/21498) |
-| bug fix |  **button:** anchor mat-icon-button as matSuffix focus misaligned ([#21117](https://github.com/angular/components/issues/21117)) ([55253abd3f2cd17686702827a47f98e5132e54a5](https://github.com/angular/components/commit/55253abd3f2cd17686702827a47f98e5132e54a5)), closes [#20949](https://github.com/angular/components/issues/20949) [#20949](https://github.com/angular/components/issues/20949) |
+| bug fix |  **button:** anchor matIconButton as matSuffix focus misaligned ([#21117](https://github.com/angular/components/issues/21117)) ([55253abd3f2cd17686702827a47f98e5132e54a5](https://github.com/angular/components/commit/55253abd3f2cd17686702827a47f98e5132e54a5)), closes [#20949](https://github.com/angular/components/issues/20949) [#20949](https://github.com/angular/components/issues/20949) |
 | bug fix |  **menu:** focus indication rendering partially in high contrast mode ([#21527](https://github.com/angular/components/issues/21527)) ([e180655270b9639965af1e8a9d963a9aec1f7f59](https://github.com/angular/components/commit/e180655270b9639965af1e8a9d963a9aec1f7f59)), closes [#21524](https://github.com/angular/components/issues/21524) |
 | bug fix |  **radio:** remove tabindex from host node ([#21280](https://github.com/angular/components/issues/21280)) ([d17883c5d49cb53bf40c9ff0894b16008a50e73c](https://github.com/angular/components/commit/d17883c5d49cb53bf40c9ff0894b16008a50e73c)), closes [#21046](https://github.com/angular/components/issues/21046) [#21266](https://github.com/angular/components/issues/21266) |
 | bug fix |  **snack-bar:** fix Firefox/JAWS not reading out snackbar message ([#21552](https://github.com/angular/components/issues/21552)) ([f76369ab71a6dd807705ce42c104ecc48a97aef3](https://github.com/angular/components/commit/f76369ab71a6dd807705ce42c104ecc48a97aef3)) |
@@ -1525,7 +1525,7 @@ the new Sass module system, which offers a number of benefits over the existing
 | bug fix |  **drag-drop:** defer resolving scrollable parents until first drag ([#18918](https://github.com/angular/components/issues/18918)) ([ca263c3](https://github.com/angular/components/commit/ca263c3)), closes [#18737](https://github.com/angular/components/issues/18737) |
 | bug fix |  **drag-drop:** handle custom preview/placeholder with multiple root nodes ([#18829](https://github.com/angular/components/issues/18829)) ([92aed70](https://github.com/angular/components/commit/92aed70)) |
 | bug fix |  **expansion:** add strong focus indication ([#18552](https://github.com/angular/components/issues/18552)) ([6feff45](https://github.com/angular/components/commit/6feff45)) |
-| bug fix |  **mat-button-toggle:** mat-button-toggle element should not h… ([#18746](https://github.com/angular/components/issues/18746)) ([709ac63](https://github.com/angular/components/commit/709ac63)) |
+| bug fix |  **matButton-toggle:** matButton-toggle element should not h… ([#18746](https://github.com/angular/components/issues/18746)) ([709ac63](https://github.com/angular/components/commit/709ac63)) |
 | bug fix |  **popover-edit:** hover content not showing up if content changes after init ([#18937](https://github.com/angular/components/issues/18937)) ([d7ff7cb](https://github.com/angular/components/commit/d7ff7cb)), closes [#18934](https://github.com/angular/components/issues/18934) |
 | bug fix |  **popover-edit:** unable to close focus content using the keyboard ([#18945](https://github.com/angular/components/issues/18945)) ([e7a197a](https://github.com/angular/components/commit/e7a197a)) |
 | bug fix |  **slider:** not stopping drag when released outside of viewport ([#18905](https://github.com/angular/components/issues/18905)) ([ca3c68f](https://github.com/angular/components/commit/ca3c68f)), closes [#18888](https://github.com/angular/components/issues/18888) |
@@ -2302,7 +2302,7 @@ Use the individual secondary entry-points, such as `@angular/material/button`.
 |            |                       |
 | ---------- | --------------------- |
 | bug fix |  **button:** ripple color should match state color ([#17066](https://github.com/angular/components/issues/17066)) ([7e98a7e](https://github.com/angular/components/commit/7e98a7e)) |
-| bug fix |  **button:** ripples were using mat-button styles ([#17069](https://github.com/angular/components/issues/17069)) ([6d48c4f](https://github.com/angular/components/commit/6d48c4f)) |
+| bug fix |  **button:** ripples were using matButton styles ([#17069](https://github.com/angular/components/issues/17069)) ([6d48c4f](https://github.com/angular/components/commit/6d48c4f)) |
 | bug fix |  **mdc-tabs:** error during server-side rendering ([#17169](https://github.com/angular/components/issues/17169)) ([57fa880](https://github.com/angular/components/commit/57fa880)) |
 | feature |  **drawer:** add harness for mat-drawer ([#17010](https://github.com/angular/components/issues/17010)) ([7ad30eb](https://github.com/angular/components/commit/7ad30eb)), closes [#16695](https://github.com/angular/components/issues/16695) |
 | feature |  **form-field:** add test harness ([#17138](https://github.com/angular/components/issues/17138)) ([eebf589](https://github.com/angular/components/commit/eebf589)) |
@@ -6898,7 +6898,7 @@ See ([#2790](https://github.com/angular/material2/issues/2790)) for the details
 * **autocomplete:** support rtl ([#2648](https://github.com/angular/material2/issues/2648)) ([4f59ad0](https://github.com/angular/material2/commit/4f59ad0))
 * **autocomplete:** up arrow should set last item active ([#2776](https://github.com/angular/material2/issues/2776)) ([fd5e4d9](https://github.com/angular/material2/commit/fd5e4d9))
 * **autosize:** export md-autosize directive ([#2432](https://github.com/angular/material2/issues/2432)) ([f2d73da](https://github.com/angular/material2/commit/f2d73da)), closes [#2419](https://github.com/angular/material2/issues/2419)
-* **button:** add default color for mat-raised-button ([#3052](https://github.com/angular/material2/issues/3052)) ([6fe1d9a](https://github.com/angular/material2/commit/6fe1d9a))
+* **button:** add default color for matRaisedButton ([#3052](https://github.com/angular/material2/issues/3052)) ([6fe1d9a](https://github.com/angular/material2/commit/6fe1d9a))
 * **button:** only flat button and icon buttons should inherit the color ([#2561](https://github.com/angular/material2/issues/2561)) ([ac363df](https://github.com/angular/material2/commit/ac363df)), closes [#2539](https://github.com/angular/material2/issues/2539)
 * **button:** raised buttons in dark theme ([#3070](https://github.com/angular/material2/issues/3070)) ([87ab712](https://github.com/angular/material2/commit/87ab712))
 * **button:** reuse _getHostElement() to avoid redundant elementRef.nativeElement calls ([#2625](https://github.com/angular/material2/issues/2625)) ([c7d1c17](https://github.com/angular/material2/commit/c7d1c17))

@@ -49,16 +49,16 @@ In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging
 
 For example, rather than doing this:
 ```html
-<mat-button>Basic button</mat-button>
-<mat-button class="mat-fab">FAB</mat-button>
-<mat-button class="mat-icon-button">pony</mat-button>
+<matButton>Basic button</matButton>
+<matButton class="mat-fab">FAB</matButton>
+<matButton class="matIconButton">pony</matButton>
 ```
 
 do this:
 ```html
-<mat-button>Basic button</mat-button>
+<matButton>Basic button</matButton>
 <mat-fab>FAB</mat-fab>
-<mat-icon-button>pony</mat-icon-button>
+<matIconButton>pony</matIconButton>
 ```
 
 #### Prefer small, focused modules

@@ -197,7 +197,7 @@ fix(material/button): unable to disable button through binding
 
 Fixes a bug in the Angular Material `button` component where buttons
 cannot be disabled through a binding. This is because the `disabled`
-input did not set the `.mat-button-disabled` class on the host element.
+input did not set the `.matButton-disabled` class on the host element.
 
 Fixes #1234
 ```

@@ -1,11 +1,11 @@
-<mat-button-toggle-group class="scene-button-toggle" aria-label="Font Style">
-  <mat-button-toggle value="bold">
+<matButton-toggle-group class="scene-button-toggle" aria-label="Font Style">
+  <matButton-toggle value="bold">
     <mat-icon>format_align_left</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="italic">
+  </matButton-toggle>
+  <matButton-toggle value="italic">
     <mat-icon>format_align_justify</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="underline" [checked]="true">
+  </matButton-toggle>
+  <matButton-toggle value="underline" [checked]="true">
     <mat-icon>format_align_right</mat-icon>
-  </mat-button-toggle>
-</mat-button-toggle-group>
+  </matButton-toggle>
+</matButton-toggle-group>
@@ -1,11 +1,11 @@
 <div class="scene-buttons">
-  <button mat-flat-button color="primary">Button</button>
-  <button mat-icon-button><mat-icon>create</mat-icon></button>
-  <button mat-raised-button>Button</button>
+  <button matFlatButton color="primary">Button</button>
+  <button matIconButton><mat-icon>create</mat-icon></button>
+  <button matRaisedButton>Button</button>
 </div>
 
 <div class="scene-buttons">
-  <button mat-raised-button>Button</button>
+  <button matRaisedButton>Button</button>
   <button mat-fab><mat-icon>add</mat-icon></button>
-  <button mat-stroked-button>Button</button>
+  <button matStrokedButton>Button</button>
 </div>
@@ -32,8 +32,8 @@ export class DialogScene {
   template: `
     <div mat-dialog-content>Discard draft?</div>
     <div mat-dialog-actions>
-      <button mat-button mat-dialog-close>Cancel</button>
-      <button mat-button mat-dialog-close>Discard</button>
+      <button matButton mat-dialog-close>Cancel</button>
+      <button matButton mat-dialog-close>Discard</button>
     </div>`,
   imports: [MatDialogModule, MatButtonModule],
 })

@@ -1,4 +1,4 @@
-<button mat-icon-button class="scene-menu-button" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+<button matIconButton class="scene-menu-button" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menu="matMenu">

@@ -2,6 +2,6 @@
   matRipple
   [matRippleDisabled]="true">
 </div>
-<button mat-raised-button color="primary" class="scene-ripples-button" #button
+<button matRaisedButton color="primary" class="scene-ripples-button" #button
         matRipple
         [matRippleDisabled]="true">RIPPLES</button>
@@ -7,7 +7,7 @@ button {
   overflow: hidden;
 }
 
-.mat-button-wrapper {
+.matButton-wrapper {
   font-size: 18px;
 }
 

@@ -2,7 +2,7 @@
   <button
     matTooltipClass="scene-tooltip-popup"
     #tooltip="matTooltip"
-    mat-icon-button
+    matIconButton
     matTooltip="Copy example source"
   >
     <mat-icon>content_copy</mat-icon>

@@ -11,7 +11,7 @@
     *matTreeNodeDef="let node;when: hasChild"
     matTreeNodePadding
   >
-    <button mat-icon-button matTreeNodeToggle>
+    <button matIconButton matTreeNodeToggle>
       <mat-icon>
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>

@@ -1,5 +1,5 @@
 <header class="docs-component-page-header">
-  <button mat-button (click)="toggleSidenav.emit()">
+  <button matButton (click)="toggleSidenav.emit()">
     <mat-icon>menu</mat-icon>
     Menu
   </button>

@@ -18,7 +18,7 @@ import {MatTooltip} from '@angular/material/tooltip';
   template: `
     <code>{{name()}}</code>
     <button
-      mat-icon-button
+      matIconButton
       matTooltip="Copy name to the clipboard"
       (click)="copy(name())">
       <mat-icon>content_copy</mat-icon>

@@ -17,7 +17,7 @@
     </mat-select>
   </mat-form-field>
 
-  <button mat-button (click)="reset()">Reset filters</button>
+  <button matButton (click)="reset()">Reset filters</button>
 </div>
 
 <div class="docs-markdown">

@@ -6,7 +6,7 @@ <h1 class="mat-h1">Angular Material</h1>
       <h2>Material Design components for Angular</h2>
     </div>
     <div class="docs-header-start">
-      <a mat-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
+      <a matRaisedButton class="docs-button" routerLink="/guide/getting-started">Get started</a>
     </div>
   </div>
   <app-logo class="docs-homepage-logo"/>
@@ -47,7 +47,7 @@ <h2>Frictionless</h2>
     <div class="docs-homepage-header">
       <h2>Featured components</h2>
 
-      <a mat-button routerLink="/components">
+      <a matButton routerLink="/components">
         View all components
         <mat-icon matButtonIcon iconPositionEnd>chevron_right</mat-icon>
       </a>
@@ -71,7 +71,7 @@ <h2>Featured components</h2>
     <div class="docs-homepage-header">
       <h2>Guides</h2>
 
-      <a mat-button routerLink="/guides">
+      <a matButton routerLink="/guides">
         View all guides
         <mat-icon matButtonIcon iconPositionEnd>chevron_right</mat-icon>
       </a>

@@ -4,8 +4,8 @@
     <div>
       <h1>Page Not Found</h1>
       <p>We're sorry. The page you are looking for cannot be found.</p>
-      <a routerLink="/" mat-button color="primary">Go Home</a>
-      <a routerLink="/guides" mat-button>Read Guides</a>
+      <a routerLink="/" matButton color="primary">Go Home</a>
+      <a routerLink="/guides" matButton>Read Guides</a>
     </div>
   </div>
 </main>

@@ -1,6 +1,6 @@
 @if (showPrevArrow) {
   <button (click)="previous()" aria-hidden="true" tabindex="-1"
-          class="docs-carousel-nav docs-carousel-nav-prev" mat-icon-button aria-label="previous">
+          class="docs-carousel-nav docs-carousel-nav-prev" matIconButton aria-label="previous">
     <mat-icon>navigate_before</mat-icon>
   </button>
 }
@@ -14,7 +14,7 @@
 
 @if (showNextArrow) {
   <button (click)="next()" aria-hidden="true" tabindex="-1"
-          class="docs-carousel-nav docs-carousel-nav-next" mat-icon-button aria-label="next">
+          class="docs-carousel-nav docs-carousel-nav-next" matIconButton aria-label="next">
     <mat-icon>navigate_next</mat-icon>
   </button>
 }
@@ -5,10 +5,10 @@
     <div class="docs-buttons">
       <a
         href="https://policies.google.com/technologies/cookies"
-        mat-button
+        matButton
         target="_blank"
         rel="noopener">More details</a>
-      <button mat-button color="primary" (click)="accept()">Okay, got it</button>
+      <button matButton color="primary" (click)="accept()">Okay, got it</button>
     </div>
   </div>
 }
@@ -19,7 +19,7 @@ import {Clipboard} from '@angular/cdk/clipboard';
 @Component({
   selector: 'module-import-copy-button',
   template: `
-    <button mat-icon-button matTooltip="Copy import to the clipboard" (click)="copy()">
+    <button matIconButton matTooltip="Copy import to the clipboard" (click)="copy()">
       <mat-icon>content_copy</mat-icon>
     </button>
   `,

@@ -2,12 +2,12 @@
   @if (view === 'snippet') {
     <div class="docs-example-viewer-source-compact">
       <div class="docs-button-bar">
-        <button mat-icon-button type="button" (click)="copySource(snippet())"
+        <button matIconButton type="button" (click)="copySource(snippet())"
                 class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
                 title="Copy example source" aria-label="Copy example source to clipboard">
           <mat-icon>content_copy</mat-icon>
         </button>
-        <button mat-icon-button type="button" (click)="toggleCompactView()"
+        <button matIconButton type="button" (click)="toggleCompactView()"
                 class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
                 aria-label="View less">
           <mat-icon>
@@ -29,7 +29,7 @@
       <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
 
       <button
-        mat-icon-button
+        matIconButton
         type="button"
         [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
         matTooltip="Copy link to example"
@@ -38,7 +38,7 @@
       </button>
 
       @if (showCompactToggle) {
-        <button mat-icon-button
+        <button matIconButton
                 (click)="toggleCompactView()"
                 matTooltip="View snippet only"
                 aria-label="View less">
@@ -51,7 +51,7 @@
         </button>
       }
 
-      <button mat-icon-button type="button" (click)="toggleSourceView()"
+      <button matIconButton type="button" (click)="toggleSourceView()"
               [matTooltip]="view === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
         <mat-icon>code</mat-icon>
       </button>
@@ -65,7 +65,7 @@
           @for (tabName of _getExampleTabNames(); track tabName) {
             <mat-tab [label]="tabName">
               <div class="docs-button-bar">
-                <button mat-icon-button type="button" (click)="copySource(snippet(), selectedTab)"
+                <button matIconButton type="button" (click)="copySource(snippet(), selectedTab)"
                         class="docs-example-source-copy docs-example-button" matTooltip="Copy example source"
                         title="Copy example source" aria-label="Copy example source to clipboard">
                   <mat-icon>content_copy</mat-icon>