将垫子图标移动到扩展面板标题标题的左侧？

Question

我稍微更改了 Angular Material 文档扩展面板手风琴演示，以便将帐户圆圈图标移动到标题左侧，如下所示：

    <mat-expansion-panel-header>
      <mat-icon>account_circle</mat-icon>
      <mat-panel-title> Personal data </mat-panel-title>
    </mat-expansion-panel-header>

但是它仍然出现在右侧。

我们如何将图标移动到标题左侧，同时将 CSS 保留在声明组件内？

Answer 1

使用

order

更改图标和标题的顺序。

mat-panel-title {
  order: 1;
}

mat-icon {
  order: 0;
  margin-right: 1rem;
}

Answer 2

在 mat-panel-title 中添加图标

<mat-panel-title>
     <mat-icon>account_circle</mat-icon>
     Personal data
</mat-panel-title>

这对我有用。 剩下的唯一问题是图标和文本之间的间距。添加

<div>&nbsp;</div>

解决了这个问题