Angular 如何在垫子图标上添加文字

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 text？

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>

Angular 如何在垫子图标上添加文字

Angular How to add text on top of mat-icon

html

css

icons

mat

angular