how to change color of mat-icon in input in angular 6?

Question

this is my html file :

      <div class="input-field">
    <div>
      <input type="text" id="name" required email/>
      <label for="name">Email:
        <mat-icon svgIcon="mail" class="change-color"></mat-icon>
      </label>
    </div>
    <div>
      <input type="text" id="psw" required />
      <label for="psw">Password:</label>
    </div>
  </div>

this is my css file :

.input-field {
position: absolute;
width: 302px;
height: 44px;
line-height: 20px;
}

label {
position: relative;
top: -25px;
left: 0;
width: 100%;
color: rgba(158, 158, 158, 1.0);
transition: 0.2s all;
cursor: text;
font-size: 14px;
font-weight: 400;
}

input {
width: 100%;
border: 0;
outline: 0;
padding: 0.5rem 0;
border-bottom: 2px solid #d3d3d3;
box-shadow: none;
color: #111;
}

.change-color {
color: #787878;
height: 12px;
width: 12px;
float: right;
}


input:invalid {
outline: 0;
}

input:focus,
input:valid {
border-color: #00dd22;
}

input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

Now I want to change the color of the icon when I click on the input but icon does not move. i solve this problem by add css like this:

input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

But still, the icon moves while its color changes, i made sample here but here this css:

 input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

But this code does not work here ☝☝: https://stackblitz.com/edit/angular-dgrpcx?file=src%2Fapp%2Fapp.component.html, so I created an example of another way

how i can solve it ? i using angular 6 .

this is image of what i want http://prntscr.com/m12bb0

Answer 1

In your CSS, add:

input:focus ~ label.ee .change-color {
  color: #00dd22;
}

Here is a working example.