Блог

 .tree-nested-node {  padding-left: 30px;  }   .mat-tree {  margin-left: 40px;  }  .mat-tree-node {  padding: 0;  background-color: white;  }   .mat-nested {  top: -24px;  }   ul,  li {  list-style: none;  margin: 0;  padding: 0;  }   li.tree-container {  border-bottom: 0;  }   ul {  padding-left: 40px;  }   li {  padding-left: 40px;  border: 2px solid #c3cbd7;  border-width: 0 0 2px 2px;  position: relative;  top: -24px;  }   li.mat-tree-node,  li div {  margin: 0;  position: relative;  top: 24px;  }   li ul {  border-top: 2px solid #c3cbd7;  margin-left: -40px;  padding-left: 60px;  }   .mat-nested:last-child ul {  border-left: 1px solid white;  margin-left: -41px;  }   .mat-icon-button {  z-index: 100;  } 

 Here is the HTML part lt;mat-tree class="mat-tree" [dataSource]="dataSource" [treeControl]="treeControl"gt;  lt;mat-nested-tree-node class="mat-nested" *matTreeNodeDef="let node"gt;  lt;ligt;  lt;div class="mat-tree-node colored__locobuzz "gt;  amp;nbsp;{{node.item}}lt;/divgt;  lt;/ligt;  lt;/mat-nested-tree-nodegt;  lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren"gt;  lt;li class="tree-container"gt;  lt;div class="mat-tree-node"gt;  lt;button mat-icon-button matTreeNodeToggle  [matTreeNodeToggleRecursive]="recursive"  [attr.aria-label]="'toggle '   node.filename"gt;  lt;mat-icon class="material-icons-outlined"gt;  {{treeControl.isExpanded(node) ? 'add_box' : 'add_box'}}  lt;/mat-icongt;  lt;/buttongt;  lt;span class="treeItem" mat-button (click)="drawer.toggle()"gt;{{node.item}}lt;/spangt;  lt;/divgt;  lt;ul class="tree-nested-node"gt;  lt;div *ngIf="treeControl.isExpanded(node)"gt;  lt;ng-container matTreeNodeOutletgt;lt;/ng-containergt;  lt;/divgt;  lt;/ulgt;  lt;/ligt;    lt;/mat-nested-tree-nodegt;  lt;/mat-treegt;