indentTree.html

<h1>https://material-tree-nested.stackblitz.io</h1>

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
<mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let node">
      <li>
        <div class="mat-tree-node">  {{node.item}}</div>
      </li>
    </mat-nested-tree-node>
    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
        <li class="example-tree-container">
          <div class="mat-tree-node">
            <button mat-icon-button matTreeNodeToggle
                    [matTreeNodeToggleRecursive]="recursive"
                  [attr.aria-label]="'toggle ' + node.filename">
              <mat-icon>
                {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>
            {{node.item}}
        </div>
        <ul class="example-tree-nested-node">
          <div  *ngIf="treeControl.isExpanded(node)">
          <ng-container matTreeNodeOutlet></ng-container>
          </div>
        </ul>
      </li>
      
    </mat-nested-tree-node>
  </mat-tree>
</mat-card>