Кнопка переключения углового материала: Как мне оформить собственные кнопки?

Question

Я пытаюсь стилизовать тумблер. Когда переключатель не выбран, изображение с изображением большого пальца серого цвета, но когда я наведу курсор мыши на изображение, оно зеленого цвета. Я хотел бы, чтобы он также был зеленым, когда выбрана эта кнопка. Как сделать так, чтобы состояние наведения также было выбранным (отмеченным)?

HTML:

    <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle class="audit-helpful-btn" style="margin-right: 20px;" value="up">
            <div class="audit-helpful-btn_image"></div>
            <div class="audit-helpful-btn_span">This was helpful</div>
        </mat-button-toggle>
        <mat-button-toggle class="audit-helpful-btn-down" value="down">
            <div class="audit-helpful-btn_image-down"></div>
            <div class="audit-helpful-btn_span">This was not helpful</div>
        </mat-button-toggle>
    </mat-button-toggle-group>

CSS:

.audit-helpful-btn {
display: flex;
background-color: #fff;
border: 1px solid #d5d5d5;
height: 40px;
min-height: 40px;
line-height: 39px !important;
white-space: nowrap;
flex-direction: row;
padding: 0px;
align-items: center;

&_image {
  display: inline-block;
  background-image: url("../../../../../../assets/security/audits/thumbs-up_neutral.svg");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: left top;
  width: 26px;
  height: 26px;
  margin: 0px 10px 0px 10px;
  padding: 0px;

}

&_image:hover {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}


&:hover {
  background-color: #f2f2f2 !important;
  color: #808080;
}

&:hover .audit-helpful-btn_image {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}

&:disabled {
  background-color: gray
}

Answer 1

К "выбранному" mat-toggle-button применен класс mat-toggle-button-checked. Вы можете использовать это как часть вашего селектора:

&_image:hover,
&.mat-toggle-button-checked > &_image {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}