与文本成一行的角度mat-list-item按钮

Question

我想将图标更改为按钮，以将其用作复制到剪贴板的方法。但是，当我这样做时，按钮将移至右侧。只有当我尝试使用该文本时，它才能起作用，但是格式当然会损坏。

<mat-list>
        <h3 matSubheader>Persönliche Daten</h3>
        <mat-list-item>
          <button mat-icon-button ngxClipboard [cbContent]="firstname">
            <mat-icon  matListAvatar>account_box</mat-icon>
          </button>
          <h4 matLine>{{firstname}}</h4>
          <p matLine>Vorname</p>
        </mat-list-item>
        <mat-divider [inset]="true"></mat-divider>
        <mat-list-item>
          <mat-icon matListAvatar>description</mat-icon>
          <h4 matLine>{{lastname}}</h4>
          <p matLine>Nachname</p>
        </mat-list-item>
</mat-list>

我的CSS：

mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    background-color: rgba(0,0,0,0.04);
}

mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;
}

/deep/ .mat-list-item-content {
    padding: 0!important;
}

/deep/ .mat-list-base .mat-subheader {
    padding: 0!important;
}

p {
    font-family: Lato;
    color: rgba(0,0,0,.54);
}

Answer 1

使用（点击）属性

您可以使图标的行为类似于按钮。

为其添加一个(click)属性，然后调用所需的函数！

<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>

然后，您可以在其中添加一些：hover css，使其看起来像一个按钮。

---

使用HTML / CSS

您可以在包装器中按钮旁边放置任何内容，可以在CSS中自定义该内容，以在需要时进行其他操作（如果最终添加了更多数据来显示，则可能需要使用flex属性，保证金...或者您可能需要嵌套包装器等...）

<button mat-icon-button > 
  <mat-icon matListAvatar>account_box</mat-icon> 
</button> 

<div class="test-wrapper"> 
  <h4 matLine>{{firstname}}</h4> 
  <p matLine> Vorname</p> 
</div> 

使用此CSS：

.test-wrapper{ 
    padding-right: 0; 
    padding-left: 16px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
}

.test-wrapper > *{ 
    margin: 0; 
}