Кнопка углового коврика в одной строке с текстом

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)

Вы можете просто заставить значок вести себя как кнопка.

Добавьте к нему свойство (click) и вызовите нужную функцию!

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

Затем вы можете добавить к нему: hover css, чтобы он выглядел как кнопка.

---

Использование HTML / CSS

Вы можете поместить любой контент рядом с кнопкой в ​​оболочку, вы можете настроить его в CSS так, чтобы он вел себя по-другому, если это необходимо (если вы добавляете большеДля отображения данных вам, возможно, придется поэкспериментировать со свойствами flex, margin ... или вам могут понадобиться вложенные оболочки и т. д. ...)

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