feat(material/button): allow appearance to be set dynamically

integration/yarn-pnp-compat/src/app/app.component.html

@@ -1 +1 @@
-<button mat-button>Click here</button>
+<button matButton>Click here</button>

src/cdk/schematics/ng-update/html-parsing/angular.ts

@@ -23,7 +23,7 @@ export function findInputsOnElementWithTag(html: string, inputName: string, tagN
 /** Finds the specified Angular @Input in elements that have one of the specified attributes. */
 export function findInputsOnElementWithAttr(html: string, inputName: string, attrs: string[]) {
   return [
-    // Inputs can be also used without brackets (e.g. `<button mat-button color="primary">`)
+    // Inputs can be also used without brackets (e.g. `<button matButton color="primary">`)
     ...findAttributeOnElementWithAttrs(html, inputName, attrs),
     // Add one column to the mapped offset because the first bracket for the @Input
     // is part of the attribute and therefore also part of the offset. We only want to return

src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html

@@ -13,5 +13,5 @@
       <mat-hint>Autofilled!</mat-hint>
     }
   </mat-form-field>
-  <button mat-raised-button>Submit</button>
+  <button matButton="elevated">Submit</button>
 </form>

src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html

@@ -13,5 +13,5 @@
       <mat-hint>Autofilled!</mat-hint>
     }
   </mat-form-field>
-  <button mat-raised-button>Submit</button>
+  <button matButton="elevated">Submit</button>
 </form>

src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html

@@ -20,7 +20,7 @@
 
       @if (!node.areChildrenLoading() && node.isExpandable()) {
         <button
-            mat-icon-button
+            matIconButton
             cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.raw.name">
           <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.html

@@ -5,7 +5,7 @@
                  [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -17,7 +17,7 @@
                  (expandedChange)="node.isExpanded = $event"
                  class="example-tree-node"
                  tabindex="0">
-    <button mat-icon-button cdkTreeNodeToggle
+    <button matIconButton cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"
             [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.html

@@ -5,7 +5,7 @@
                  [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -16,7 +16,7 @@
                  [isDisabled]="!shouldRender(node)"
                  [isExpandable]="true"
                  class="example-tree-node">
-    <button mat-icon-button cdkTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
+    <button matIconButton cdkTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>

src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.html

@@ -5,7 +5,7 @@
                  [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -16,7 +16,7 @@
                  [isDisabled]="!shouldRender(node)"
                  [isExpandable]="node.expandable"
                  class="example-tree-node">
-    <button mat-icon-button cdkTreeNodeToggle
+    <button matIconButton cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"
             [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html

@@ -5,7 +5,7 @@
                  [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -15,7 +15,7 @@
                  [isDisabled]="!shouldRender(node)"
                  (expandedChange)="node.isExpanded = $event"
                  class="example-tree-node">
-    <button mat-icon-button cdkTreeNodeToggle
+    <button matIconButton cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"
             [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">

src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html

@@ -3,7 +3,7 @@
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
       class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -13,7 +13,7 @@
     isExpandable
     class="example-tree-node">
     <button
-      mat-icon-button
+      matIconButton
       class="example-toggle"
       [attr.aria-label]="'Toggle ' + node.name"
       cdkTreeNodeToggle>

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html

@@ -3,7 +3,7 @@
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
       class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -14,7 +14,7 @@
     isExpandable
     class="example-tree-node">
     <button
-      mat-icon-button
+      matIconButton
       class="example-toggle"
       [attr.aria-label]="'Toggle ' + node.name"
       cdkTreeNodeToggle>

src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html

@@ -3,7 +3,7 @@
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
       class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button matIconButton disabled></button>
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
@@ -13,7 +13,7 @@
     isExpandable
     class="example-tree-node">
     <button
-      mat-icon-button
+      matIconButton
       class="example-toggle"
       [attr.aria-label]="'Toggle ' + node.name"
       cdkTreeNodeToggle>

src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.html

@@ -22,9 +22,9 @@
         </div>
 
         <div mat-edit-actions>
-          <button mat-button type="submit">Confirm</button>
-          <button mat-button cdkEditRevert>Revert</button>
-          <button mat-button cdkEditClose>Close</button>
+          <button matButton type="submit">Confirm</button>
+          <button matButton cdkEditRevert>Revert</button>
+          <button matButton cdkEditClose>Close</button>
         </div>
       </form>
     </div>
@@ -46,7 +46,7 @@
       {{person.firstName}}
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
     </td>
   </ng-container>
@@ -61,7 +61,7 @@
       {{person.middleName}}
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
     </td>
   </ng-container>
@@ -76,7 +76,7 @@
       {{person.lastName}}
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
     </td>
   </ng-container>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html

@@ -47,16 +47,16 @@ <h2 mat-edit-title>Name</h2>
               </mat-form-field>
             </div>
             <div mat-edit-actions>
-              <button mat-button type="submit">Confirm</button>
-              <button mat-button matEditRevert>Revert</button>
-              <button mat-button matEditClose>Close</button>
+              <button matButton type="submit">Confirm</button>
+              <button matButton matEditRevert>Revert</button>
+              <button matButton matEditClose>Close</button>
             </div>
           </form>
         </div>
       </ng-template>
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
     </mat-cell>
   </ng-container>
@@ -69,7 +69,7 @@ <h2 mat-edit-title>Name</h2>
       {{element.weight}}
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
       </mat-cell>
   </ng-container>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html

@@ -26,10 +26,10 @@
 
       <!-- Row hover content in a non-edit cell. -->
       <span *matRowHoverContent>
-        <button mat-icon-button (click)="goodJob(element)">
+        <button matIconButton (click)="goodJob(element)">
           <mat-icon>thumb_up</mat-icon>
         </button>
-        <button mat-icon-button (click)="badJob(element)">
+        <button matIconButton (click)="badJob(element)">
           <mat-icon>thumb_down</mat-icon>
         </button>
       </span>
@@ -62,17 +62,17 @@ <h2 mat-edit-title>Name</h2>
               </mat-form-field>
             </div>
             <div mat-edit-actions>
-              <button mat-button type="submit">Confirm</button>
-              <button mat-button matEditRevert>Revert</button>
-              <button mat-button matEditClose>Close</button>
+              <button matButton type="submit">Confirm</button>
+              <button matButton matEditRevert>Revert</button>
+              <button matButton matEditClose>Close</button>
             </div>
           </form>
         </div>
       </ng-template>
 
       @if (nameEditEnabled) {
         <span *matRowHoverContent>
-          <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+          <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
         </span>
       }
     </td>
@@ -109,7 +109,7 @@ <h2 mat-edit-title>Name</h2>
       </ng-template>
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
       </span>
     </td>
   </ng-container>
@@ -122,7 +122,7 @@ <h2 mat-edit-title>Name</h2>
       {{element.weight}}
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
       </span>
     </td>
   </ng-container>
@@ -162,15 +162,15 @@ <h2 mat-edit-title>Name</h2>
               </mat-selection-list>
             </div>
             <div mat-edit-actions>
-              <button mat-button type="submit">Confirm</button>
-              <button mat-button matEditRevert>Revert</button>
+              <button matButton type="submit">Confirm</button>
+              <button matButton matEditRevert>Revert</button>
             </div>
           </form>
         </div>
       </ng-template>
 
       <span *matRowHoverContent>
-        <button mat-icon-button matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
+        <button matIconButton matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
       </span>
     </td>
   </ng-container>

src/components-examples/material/badge/badge-harness/badge-harness-example.html

@@ -1,10 +1,10 @@
-<button mat-button id="simple" [matBadge]="simpleContent()">Simple</button>
-<button mat-button
+<button matButton id="simple" [matBadge]="simpleContent()">Simple</button>
+<button matButton
     id="overlapping"
     matBadge="O"
     [matBadgeOverlap]="overlap()">Overlapping</button>
 <button
-    mat-button
+    matButton
     id="disabled"
     matBadge="D"
     [matBadgeDisabled]="disabled()">Disabled</button>

src/components-examples/material/badge/badge-overview/badge-overview-example.html

@@ -10,7 +10,7 @@
 <div class="demo-section">
   Button with a badge on the left
 <!-- #docregion mat-badge-position -->
-  <button mat-raised-button matBadge="8" matBadgePosition="before">
+  <button matButton="elevated" matBadge="8" matBadgePosition="before">
     Action
   </button>
 <!-- #enddocregion mat-badge-position -->
@@ -19,7 +19,7 @@
 <div class="demo-section">
     Button toggles badge visibility
 <!-- #docregion mat-badge-hide -->
-    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+    <button matButton="elevated" matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
         Hide
     </button>
 <!-- #enddocregion mat-badge-hide -->

src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html

@@ -1,3 +1,3 @@
 <p>You have received a file called "cat-picture.jpeg".</p>
 
-<button mat-raised-button (click)="openBottomSheet()">Open file</button>
+<button matButton="elevated" (click)="openBottomSheet()">Open file</button>

src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html

@@ -1,10 +1,10 @@
 <button
-  mat-raised-button
+  matButton="elevated"
   disabled
   disabledInteractive
   matTooltip="This is a tooltip!">Disabled button allowing interactivity</button>
 
 <button
-  mat-raised-button
+  matButton="elevated"
   disabled
   matTooltip="This is a tooltip!">Default disabled button</button>

src/components-examples/material/button/button-harness/button-harness-example.html

@@ -1,3 +1,3 @@
-<button id="basic" type="button" mat-button (click)="clicked = true">
+<button id="basic" type="button" matButton (click)="clicked = true">
   Basic button
 </button>