Angular如何在mat-icon顶部添加文本

Question

考虑此html：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: red; font-size: 30px">P</span></mat-icon>

哪个结果在文件夹 icon 和旁边的P text 中。

是否可以在文件夹 icon 顶部使用P 文本？

Answer 1

使用以下代码

    <mat-icon class="fa fa-folder" style="font-size:48px;"></mat-icon>
<div style="color: red; font-weight: bold; font-size: 24px; margin-top:-1px; margin-left:15px">P</div>

Answer 2

这就是我想要的：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    
      <mat-icon class="fa fa-folder" style="font-size:40px; color: black">
      <span style="color: red; font-weight: bold; font-size: 30px; margin-right: 12px; display:block; margin-top: -35px; margin-left: 10px">P</span>
      </mat-icon>