Html 带文本的一行中的角垫列表项按钮

我想将我的图标更改为按钮，将其用作复制到剪贴板的方法。但当我这样做时，按钮会移到右边。只有当我尝试在文本周围添加一个新的标记时，它才起作用，但格式当然会被破坏

<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>

使用（单击）属性 您只需将图标设置为按钮

向其添加

（单击）

属性并调用所需的函数

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

使用（单击）属性 您只需将图标设置为按钮

向其添加

（单击）

属性并调用所需的函数

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

---

我不知道如何让一个简单的图标像一个按钮。这对用户来说应该是显而易见的，这是可点击的，并且有效果。你说你想把图标改成按钮。如果您添加

（单击）

属性，它将在单击图标后调用任何函数。你不必做任何其他事情。为了让它明显的可点击，你可以使用一些css，这样悬停时它会变暗。我不确定是什么问题。我是否误解了您的意图？问题是没有可使用

（单击）

调用的函数。所以那真的不管用。库的工作原理不同。明白了，虽然我确信有一种方法可以复制到clipborad，编写自己的函数，但使用库可能更符合逻辑。我会亲自看一看，如果我发现了什么，我会编辑这个。是的，我知道我也想创建自己的函数，但后来我的想法改变了，因为我认为我会在不同的组件上使用它。我不知道如何让一个简单的图标像按钮一样工作。这对用户来说应该是显而易见的，这是可点击的，并且有效果。你说你想把图标改成按钮。如果您添加

（单击）

属性，它将在单击图标后调用任何函数。你不必做任何其他事情。为了让它明显的可点击，你可以使用一些css，这样悬停时它会变暗。我不确定是什么问题。我是否误解了您的意图？问题是没有可使用

（单击）

调用的函数。所以那真的不管用。库的工作原理不同。明白了，虽然我确信有一种方法可以复制到clipborad，编写自己的函数，但使用库可能更符合逻辑。我会亲自看一看，如果我发现了什么，我会编辑这个。是的，我知道我也想创建自己的函数，但后来我的想法改变了，因为我想我也会在不同的组件上使用它。

<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> 

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