docs(cdk/tree): fix several live example issues (#29875)

Fixes the following issues with the tree live examples:
* Both the tree node and the toggle were marked as toggles which meant that clicking anywhere would close the tree.
* The toggles weren't centered relative to the text.
* A couple of examples had the same name and one had weird punctuation.

Fixes #29830.

(cherry picked from commit 52cad9c)

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

@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}

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

@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      *cdkTreeNodeDef="let node; when: hasChild"
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    *cdkTreeNodeDef="let node; when: hasChild"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>

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

@@ -17,7 +17,7 @@ function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
 }
 
 /**
- * @title Tree with nested nodes, using childAccessor
+ * @title Tree with nested nodes using childAccessor
  */
 @Component({
   selector: 'cdk-tree-nested-children-accessor-example',

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

@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}

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

@@ -7,13 +7,17 @@
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+  <cdk-nested-tree-node
+    #treeNode="cdkNestedTreeNode"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>

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

@@ -6,7 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {FLAT_DATA, FlatFoodNode} from '../tree-data';
 
 /**
- * @title Tree with nested nodes
+ * @title Tree with nested nodes and level accessor
  */
 @Component({
   selector: 'cdk-tree-nested-level-accessor-example',

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

@@ -15,3 +15,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}

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

@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>