title: Angular How to add text on top of mat-icon
body: <p>consider this html:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  
  &lt;mat-icon class="fa fa-folder" style="font-size:48px;"&gt;&lt;span style="color: red; font-size: 30px"&gt;P&lt;/span&gt;&lt;/mat-icon&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Which result in Folder <em>icon</em> and P <em>text</em> next to it.</p>
  <p>Is it possible to have the P <em>text</em> on top of Folder <em>icon</em>?</p>