title: how to use outlined material icon
body: <p><strong>Scenario :</strong></p>
  
  <ul>
  <li>I'm using material icons, and I face a problem,<br> I usually use filled ones and everything is ok, <br>right now I want to use a outlined one, they have the same name, "screen_share"</li>
  </ul>
  
  <p><strong>Tried Case :</strong>
  <br>My try was include in <strong>index.html</strong>:</p>
  
  <pre><code>&lt;link 
  type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" 
  rel="stylesheet"/&gt; 
  
  &lt;link type="text/css" 
  href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;style=outlined" 
  rel="stylesheet"&gt;
  </code></pre>
  
  <p>and in <strong>myComponent.html</strong></p>
  
  <pre><code>&lt;button mat-button&gt;
     &lt;mat-icon&gt;
        screen_share_outline
     &lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>but it still shows the filled one.</p>
  
  <p>How can I do it?</p>
  
  <p>this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work</p>