如何将子弹添加到角形材料清单中？

Question

我想要带有弹头的棱角材料清单。我尝试添加list-style / list-style-type CSS属性。但是它不起作用。如何实现？

Stackblitz demo

Answer 1

我也无法使display:list-items和list-style-type正常工作...但是在查看文档时，我们可能必须使用以下任一方法：

• matListIcon
• 图标库，例如font-awesome

这是您可以选择的HTML块：

<h3>Simple lists</h3>
<mat-divider></mat-divider>
<mat-list>
    <mat-list-item *ngFor="let item of simpleItems">
        <mat-icon matListIcon>lens</mat-icon>
    <!-- OR -->
        <mat-icon matListIcon>fiber_manual_record</mat-icon>
    <!-- OR -->
        <i class="fa fa-circle" style="font-size:16px"></i>
    <!-- OR -->
        <i class="fa fa-circle" style="font-size:12px"></i>
        {{ item }}
    </mat-list-item>
</mat-list>
<mat-divider></mat-divider>

分叉的stackblitz here

Answer 2

您可以使用 Unicode 字符（例如 this one）作为项目符号。

用法示例：

my-li:before {
    content: "\2B24";
    color: black;
    padding-right: 6px;
}