Alignment Problem with Angular Material Expansion Panel with mat-nav-list

Question

I am using mat-nav-list to display the Menu items and the 4th Menu item is an Angular Material Expansion control. I am missing the alignment here. Screenshot of it is below.

EDIT

The related code is given below..

<mat-nav-list>
    <a id="user1id" mat-list-item matTooltip="User1" [routerLink]="['/user1']" 
      <mat-icon>user1_icon</mat-icon>
      <span>User 1</span>
    </a>
    <a id="user2id" mat-list-item matTooltip="User2" [routerLink]="['/user2']" 
      <mat-icon>user2_icon</mat-icon>
      <span>User 2</span>
    </a>
    <a id="user3id" mat-list-item matTooltip="User3" [routerLink]="['/user3']">
      <mat-icon>user2_icon</mat-icon>
      <span>User 3</span>
    </a>
    <a>
      <mat-accordion class="mat-accordion-setting" >
        <mat-expansion-panel hideToggle [(expanded)]="panelOpenState">
          <mat-expansion-panel-header>
            <mat-panel-title matTooltip="User 4 Title" style="text-align: left;">
              <table border="1" width="200px">
                <tr>
                  <td style="padding-left:0px; padding-right: 0px;"><mat-icon
                      class="mat-accordion-setting">user4_icon</mat-icon></td>
                  <td class="mat-panel-title-setting">User 4 Title</td>
                </tr>
              </table>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div>
            <mat-panel-description id="submenu1" 
              class="mat-panel-description-setting"><a [routerLink]="['/submenu1']"
                routerLinkActive="active">Submenu 1</a></mat-panel-description>
            <mat-panel-description id="submenu2" 
              class="mat-panel-description-setting"><a [routerLink]="['/submenu2']"
                routerLinkActive="active">Submenu 2</a></mat-panel-description>
            <mat-panel-description id="submenu3" 
              class="mat-panel-description-setting"><a [routerLink]="['/submenu3']"
                routerLinkActive="active">Submenu 3
                </a></mat-panel-description>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </a>
</mat-nav-list>

How to Align the Icon to the left of the Menu list? How to correct it?

Answer 1

I was trying to reproduce the error:

The problem was caused by the following reasons:

1. The mat-expansion-panel-header element has set padding: 0 24px; by default, whereas the mat-list-item element has set padding: 0 16px; by default.
2. You didn't add the border-collapse: collapse; CSS to the table.

Also, change <table border="1" width="200px"> to <table border="0" width="200px">.

list-overview-example.ts

import { Component } from '@angular/core';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatExpansionModule } from '@angular/material/expansion';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  standalone: true,
  imports: [MatListModule, MatIconModule, MatExpansionModule],
})
export class ListOverviewExample {}

list-overview-example.html

<mat-list role="list">
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 1</span>
  </a>
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 2</span>
  </a>
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 3</span>
  </a>
  <a>
    <mat-accordion class="mat-accordion-setting">
      <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title matTooltip="User 4 Title" style="text-align: left">
            <table border="0" width="200px">
              <tr>
                <td style="padding-left: 0px; padding-right: 0px">
                  <mat-icon class="mat-accordion-setting"
                    >accessibility</mat-icon
                  >
                </td>
                <td class="mat-panel-title-setting">User 4 Title</td>
              </tr>
            </table>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description
            id="submenu1"
            class="mat-panel-description-setting"
            ><a>Submenu 1</a></mat-panel-description
          >
          <mat-panel-description
            id="submenu2"
            class="mat-panel-description-setting"
            ><a>Submenu 2</a></mat-panel-description
          >
          <mat-panel-description
            id="submenu3"
            class="mat-panel-description-setting"
            ><a>Submenu 3 </a></mat-panel-description
          >
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-list>

styles.scss

.mat-expansion-panel-header {
  padding: 0 16px !important;
}

table {
  border-collapse: collapse;
}

Output:

See the live demo.