CODEWITHSUNDEEP
cssangularangular-material
r3plica
r3plica

Reputation: 13367

Angular 9 use material icons in css for a list

I have a content management system supplying one of our applications with HTML. I have been asked to change all "ul"s to use a <mat-icon>check_circle_outline</mat-icon> instead of the default "."

The problem is; I can't modify the content so I have to do it through css. is there a way to add the icon to the css directly instead of using <mat-icon>check_circle_outline</mat-icon> ?

For example, with font-awesome you could do something like

.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 a similar way to do it with angular material?

Upvotes: 1

Views: 2263

Answers (1)

r3plica
r3plica

Reputation: 13367

Turns out it's not that different:

.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;
}

Upvotes: 3

Related Questions