マット拡張パネルのコンポーネントのアイコンの配置の問題

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拡張パネルのコンテナがフレキシボックスを使用しているので、我々はコンテンツを揃え、この「フレックス基礎」のためにフレキシボックスのアプローチを使用する必要が最良の方法です。例えば

、このようにあなたのコンポーネントでオーバーライドCSS：https://stackblitz.com/edit/angular-b8whsd?file=app%2Fexpansion-overview-example.css