title: Change SVG size in Angular Material 2 <mat-icon> using vanilla CSS or HTML
body: <p>How do I change the size of an SVG icon on Angular 2+ Material Design using <strong>vanilla CSS, HTML, or JS</strong>? </p>
  
  <p>If I specify the icon inside the HTML element, styling works fine:</p>
  
  <pre><code>&lt;mat-icon style="font-size: 16px !important"&gt;home&lt;/mat-icon&gt;
  </code></pre>
  
  <p>However, when I use the <code>svgIcon</code> attribute (for instance, if using a third-party icon library), the icon cannot be resized:</p>
  
  <pre><code>&lt;mat-icon style="font-size: 16px !important" svgIcon="home"&gt;&lt;/mat-icon&gt;
  </code></pre>
  
  <p>I am aware that SVGs are more complicated to scale, and I could use the <code>viewBox</code> attribute. However, I cannot even access the <code>&lt;svg&gt;</code> child element inside <code>&lt;mat-icon&gt;</code> to do an ugly JS hack. Is there a straightforward way of doing it with vanilla CSS? Or even an ugly hack on the Angular component?</p>
  
  <p><strong>Extra info:</strong> I am using the <code>mdi.svg</code> icon library from <a href="https://materialdesignicons.com" rel="noreferrer">https://materialdesignicons.com</a> to get additional icons for my Angular project. To use these, however, I must use the <code>svgIcon</code> attribute.</p>