垫扩展面板组件图标对齐问题

Question

我使用组件的可折叠菜单，但图标对齐不正确来对齐右侧的文本，而不是左侧，任何人可以建议如何实现这个问题。使用下面的代码

：

<mat-expansion-panel class="mxSubMenuContainer"> 
      <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px"> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       <mat-panel-title> 
        Personal data 
       </mat-panel-title> 
      </mat-expansion-panel-header> 

      <a mat-list-item class="sidenav-link mat-list-item mat-ripple" > 
       <div class="mat-list-item-content"> 
        <div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div> 
        <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
        <div class="mat-list-text"> 
         <span class="title mat-line" md-line="">Pages</span> 
        </div> 
        </div> 
      </a> 
      </mat-expansion-panel> 

预计UI

Answer 1

你要把图标入题。例如

<mat-expansion-panel class="mxSubMenuContainer"> 
     <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px"> 

      <mat-panel-title> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       Personal data 
      </mat-panel-title> 
     </mat-expansion-panel-header> 

     <a mat-list-item class="sidenav-link mat-list-item mat-ripple" > 
      <div class="mat-list-item-content"> 
       <div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       <div class="mat-list-text"> 
        <span class="title mat-line" md-line="">Pages</span> 
       </div> 
       </div> 
     </a></mat-expansion-panel> 

Answer 2

材料2扩展板的容器在默认情况下使用Flexbox的，所以我们需要使用Flexbox的方式来排列内容，并为这种“柔性基础”是最好的方式。

例如，在这样的组件覆盖CSS：

mat-panel-title { 
    flex-basis: 0; 
} 
mat-panel-description { 
    flex-basis: 100%; 
} 

我创建例如你问：https://stackblitz.com/edit/angular-b8whsd?file=app%2Fexpansion-overview-example.css