Angular mat-list-item button in one line with text - html

Question

I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.
<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>
My 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

Using the (click) property
You can just make the icon behave like a button.
Add a (click) property to it and call the function you want!
<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>
Then you can add some :hover css to it to make it feel like a button.
Using HTML/CSS
You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)
<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>
with this css:
.test-wrapper{
padding-right: 0;
padding-left: 16px;
width: 100%;
display: flex;
flex-direction: column;
}
.test-wrapper > *{
margin: 0;
}