refactor(multiple): switch button selectors

Reworks the various places where we have buttons to use the new selectors.

Author: crisbeto

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>