Angular 9 использовать значки материалов в css для списка

Question

У меня есть система управления контентом, снабжающая одно из наших приложений HTML. Меня попросили изменить все "ul", чтобы использовать <mat-icon>check_circle_outline</mat-icon> вместо "по умолчанию".

Проблема в том; Я не могу изменить контент, поэтому мне нужно сделать это через css. есть ли способ добавить значок в css напрямую вместо использования <mat-icon>check_circle_outline</mat-icon>?

Например, с помощью font-awesome вы могли бы сделать что-то вроде

.list-style-checked {
    margin-left: 2.5em;
    padding: 0;

    li {
        position: relative;

        span {
            font-family: "Font Awesome 5 Free";
            position: absolute;
            left: -2em;
            text-align: center;
            width: 2em;
            line-height: inherit;

            &:before {
                content: "\f14a";
            }
        }
    }
}

is there аналогичный способ сделать это с материалом angular?

Answer 1

Оказывается, не так уж и много:

.list-style-checked {
  @include bodyLight;
  color: black;
  margin-left: 36px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;

  p {
    margin-bottom: 0;
  }

  li {
    position: relative;
    text-align: left;

    span {
      font-family: 'Material Icons';
      font-size: 24px;
      position: absolute;
      width: 24px;
      height: 24px;
      left: -30px;
      text-align: center;
      line-height: inherit;

      &:before {
        display: block;
        margin-top: -4px;
        content: 'check_circle_outline';
      }
    }
  }
}

&.list-style-strikethrough p {
  text-decoration: line-through;
}