mat-icon doesn't show the icon dynamically in mat-tree sub item

Question

I want to show icon before sub item but when I use it dynamically it doesn't show in my page. Here <mat-icon *ngIf="node.icon">{{node.icon}}</mat-icon> is not working.

 component.ts
    
        
    const TREE_DATA: RouteNode[] = [
      {
        name: 'PATIENT',
        children: [
          { path: '/patient/list', icon: 'format_list_numbered_rtl' , name: 'PATIENT LIST', class: 'router-link-active'},
          { path: '/patient/history', icon: 'history', name: 'PATIENT HISTORY', class: 'router-link-active'},
        ]
      },
      {
        name: 'MEDICINE',
        children: [
          { path: '/medicine/list', icon: 'format_list_numbered_rtl', name: 'MEDICINE LIST', class: 'router-link-active'},
          { path: '/medicine/purchase', icon: 'inventory', name: 'PURCHASE MEDICINE', class: 'router-link-active'},
        ]
      },
      {
        name: 'APPOINMENT',
        children: [
          {path: '/visitentries/list', icon: 'format_list_numbered_rtl', name: 'VISIT ENTRIES', class: 'router-link-active'},
          {path: '/prescription/list', icon: 'format_list_numbered_rtl', name: 'PRESCRIPTION', class: 'router-link-active'},
        ]
      }
    ];
    
    component.html

     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
              <!-- This is the tree node template for leaf nodes -->
              <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="20">
                <!-- use a disabled button to provide padding for tree leaf -->
                <button mat-icon-button disabled></button>
                <a [routerLink]="[node.ROUTES]" routerLinkActive="link-active" >
                  <mat-icon *ngIf="node.icon">{{node.icon}}</mat-icon> 
                 {{node.name}}</a>
              </mat-tree-node>
              <!-- This is the tree node template for expandable nodes -->
              <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20">
                <button mat-icon-button matTreeNodeToggle
                        [attr.aria-label]="'Toggle ' + node.name">
                  <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                  </mat-icon>
                  {{node.name}}
                </button>
              </mat-tree-node>
            </mat-tree>