<mat-tree
  #orgranizationTree
  [dataSource]="dataSource"
  [treeControl]="treeControl"
  class="organization-tree"
>
  <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node" (click)="onClickNode(node)">
        {{ node.title }}
      </div>
    </li>
  </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li>
      <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'toggle ' + node.filename"
        >
          <mat-icon class="mat-icon-rtl-mirror">
           <!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
          </mat-icon>
        </button>
        {{ node.title }}
      </div>
      <ul
        [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
      >
        <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
          <ng-container matTreeNodeOutlet></ng-container>
        </div>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>
