title: How to change active material list material list item color of angular components?
body: <p><a href="https://i.stack.imgur.com/IoyHH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IoyHH.png" alt="enter image description here"></a>I am trying to display <code>material-list-items</code> of <code>material-list</code> with a background color <code>$mat-amber-A400</code>but while click on any of the <code>material-list-item</code> it changes the color to <code>light-grey</code>. How can I apply <code>background-color</code> 
  to <code>$mat-amber-A400</code> color even on click of items.</p>
  
  <p>app_component.html</p>
  
  <pre><code>&lt;material-list class="name-card" *ngFor="let item of names"&gt;
              &lt;material-list-item class="names"&gt;
                  &lt;span class="first"&gt;{{item.first}}&lt;/span&gt;
                  &lt;span class="second"&gt;{{item.second}}&lt;/span&gt;
                  &lt;material-chips&gt;&lt;material-chip class="my-theme" [removable]="false"&gt;&lt;/material-chip&gt;
                      &lt;material-chip class="my-theme" [removable]="false"&gt;&lt;/material-chip&gt;
                  &lt;/material-chips&gt;
              &lt;/material-list-item&gt;
          &lt;/material-list&gt;
  </code></pre>
  
  <p>app_component.scss</p>
  
  <pre><code>material-list material-list-item {
    display: flex;
    flex-direction: column;
  }
  
  material-list material-list-item:hover, material-list-item:active, material-list-item:visited {
    background-color: $mat-amber-A400;
  }
  
  .name-card {
    background-color: $mat-amber-A400;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin: 16px;
    display: inline-flex;
  }
  </code></pre>