title: Angular Material button remove autofocus
body: <p>I have the following button</p>
  
  <pre><code>&lt;td mat-cell *matCellDef="let element"&gt;
    &lt;button mat-icon-button type="button" (click)="downloadStuff(element)"&gt;
      &lt;mat-icon mat-icon matTooltip="{{element.someId}}"&gt;picture_as_pdf&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>All good but I noticed the little bugger gets outlined by default:</p>
  
  <p><a href="https://i.stack.imgur.com/hcirb.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hcirb.jpg" alt="enter image description here"></a></p>
  
  <p>Ok.... CSS lets me remove the annoying outline withe the following:</p>
  
  <pre><code>button:focus {
      outline: none;
  }
  </code></pre>
  
  <p>But then.. I still get this annoying default background focus:</p>
  
  <p><a href="https://i.stack.imgur.com/6m3VM.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6m3VM.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried a few overlay and background-related things in CSS and none of these seemed to address the issue. 
  How do I remove this default background?
  And why does it behave like this by deafault???  </p>
  
  <p>See the selected item in dev tools. 
  <a href="https://i.stack.imgur.com/VY3c4.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/VY3c4.jpg" alt="enter image description here"></a></p>