title: Can't adjust line height of list items in a mat-tree
body: <p>I’m working with a mat-tree in my Angular 7 application. It looks like this:</p>
  
  <pre><code>&lt;mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree"&gt;
  
  &lt;mat-tree-node *matTreeNodeDef="let node"&gt;
    &lt;li&gt;
      &lt;span *ngFor="let item of getArrayForIndenting(node)"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
      &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
      {{ node.name }}: {{ node.value }}
    &lt;/li&gt;
  &lt;/mat-tree-node&gt;
  
  &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild"&gt;
    &lt;div&gt;
      &lt;span *ngFor="let item of getArrayForIndenting(node)"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
      &lt;button mat-icon-button matTreeNodeToggle&gt;
        &lt;mat-icon class="mat-icon-rtl-mirror"&gt;
          {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
        &lt;/mat-icon&gt;
      &lt;/button&gt;
      {{ node.name }}
    &lt;/div&gt;
    &lt;ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)"&gt;
      &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
    &lt;/ul&gt;
  &lt;/mat-nested-tree-node&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/07RnV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/07RnV.png" alt="enter image description here"></a></p>
  
  <p>Notice that each node is spaced really far apart vertically. This is what I’m trying to adjust.</p>
  
  <p>I’ve tried everything. I’ve tried styling the height of various elements in the above markup, the line-height, the margins, the padding, etc., but nothing works.</p>
  
  <p>According to this site:</p>
  
  <p><a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css" rel="nofollow noreferrer">https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css</a></p>
  
  <p>I should be able to set the line-height on the ul element, but I tried that and it doesn’t work.</p>
  
  <p>Can anyone tell what I’m supposed to do? Thanks.</p>
  
  <p>EDIT: Here's the CSS:</p>
  
  <pre><code>.example-tree-invisible {
    display: none;
  }
  
  .example-tree li,
  .example-tree ul {
    list-style-type: none;
  }
  </code></pre>
  
  <p>Note that I removed the "mat-tree-node" class 'cause it didn't exist.</p>
  
  <p>There's also a reference to fonts.googleapis.com in my index.html file:</p>
  
  <pre><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  </code></pre>
  
  <p>...which is probably what mat-icon-rtl-mirror comes from.</p>
  
  <p>Hope that helps</p>