css - Show mat-icon on hover

I have mat-list in my html template:

  add {{ item.title }}

I want to display mat-icon only on mat-list-item hover. So I come up with this css:

mat-icon {
  display: none;

}

mat-list-item:hover + mat-icon {
  display: block;
}

But for some reason it is does not work

However if I do try to change the background color it is works:

mat-list-item:hover {
  background-color: #3f51b5;
}

It is probably something to do with mat-icon
Thoughts?

Answer

try this

mat-icon{
  display: none;
}

mat-list-item:hover mat-icon{
  display: block;
}

you do not need + adjacent selectors

demo