title: Angular mat-icon scaling own svg
body: <p>I'm trying to insert an mat-con to a button, which is part of a user-defined component.</p>
  
  <pre><code>`&lt;button mat-button&gt;
    &lt;mat-icon svgIcon="jenkins" class="material-icons md-10"&gt;&lt;/mat-icon&gt;  
    Jenkins
  &lt;/button&gt;`
  </code></pre>
  
  <p>The CSS-file of my component looks like that:</p>
  
  <pre><code>.material-icons.md-10 { font-size: 10px; }
  </code></pre>
  
  <p>But when I open my page it looks like that:
  <a href="https://i.stack.imgur.com/sbb5t.png" rel="nofollow noreferrer">Wrong size</a></p>
  
  <p>It should be the jenkins-logo (<a href="http://jenkins.io" rel="nofollow noreferrer">http://jenkins.io</a>) as a svg-graphic. But if I change the font-size the size of the picture doesn't change. The only thing I see is a little part of it.</p>
  
  <p>How can I resize the icon or scale it?</p>
  
  <p>Thank you</p>