Utilize Material icons in CSS for a list in Angular 9

My task involves altering the HTML provided by a content management system for one of our applications. Specifically, I need to replace all "ul"s with 

<mat-icon>check_circle_outline</mat-icon>
instead of the default "."

The challenge lies in the fact that I am unable to directly modify the content, requiring me to find a solution through CSS. Is there a method to incorporate the icon directly into the CSS without utilizing 

<mat-icon>check_circle_outline</mat-icon>
?

For instance, using font-awesome, one could achieve this as shown below:

.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 comparable approach when working with Angular Material?

cssangularangular-material

Answer №1

Interestingly, the similarities are more apparent than the differences:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

htmlcss

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

My HTML file loads my OpenLayers JavaScript file (which displays a map frame) when opened directly. However, when running the HTML from my Flask python app, the JavaScript file/object fails to load (resulting in no map display, just some heading text). I ...

javascriptpythonhtmlcssflask

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

javascripthtmlcss

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

csshtmldoctype

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

htmlcssbootstrap-4

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Is there a foolproof method to verify if a user truly has visibility of a div element?

When I search online, most solutions only consider the viewport and/or the first parent container that is scrollable when trying to determine if a div is visible. However, I am wondering if there is a foolproof method to check if a div is truly visible t ...

htmlcssdomviewportscrollable

Removing a key from an index signature in Typescript - a step-by-step guide

In my web application built with Angular, we encountered a need for a data type to store translations of strings in different languages. To address this requirement, a team member defined the following type: export class TranslatedString { [language: str ...

javascriptangulartypescriptindex-signature

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

javascriptcssreactjsnext.js

Is using instanceof the most effective method to verify type in Angular?

When working with the model, we import Type1 and Type2. Using the TypeComp variable which is a union of Type1 and Type2. import { Type1, Type2 } from '.'; export type TypeComp = Type1 | Type2; In the some.component.ts file, the selectedData$ obs ...

angulartypescripttypes

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

Mastering Two-Way Binding in Angular 2 with JavaScript Date Objects

I am currently utilizing Angular 2 and have encountered the following code: Within the JS file, this code initializes the employee-variable for the template: handleEmployee(employee : Employee){ this.employee = employee; this.employee.sta ...

angulartypescript

Vertically animating an image using jQuery

I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...

javascriptjqueryhtmlcssjquery-animate

Show content based on dynamically selected dropdown in Angular

I am facing an issue with a dynamic select element in Angular. I am struggling to display the selected values on the view because I cannot seem to create a click event on the dropdown options or access the selected option via a click event on the <selec ...

angulartypescript

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

cssangular

Automatically log into Google using Angular with Angularx-Social-Login

Utilizing Google sign-in and Angularx-Social-Login to authenticate users has been successful for me. However, I am facing an issue where users have to log in again whenever they reload the page or open a new tab, despite setting autologin: true. I have imp ...

angulargoogle-signinangular-servicesangular13

Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...

htmlcss

Angular 4 offers a variety of template options to choose from

Imagine these divs within a component: <div ngIf="condition1"> <button (click)="set_condition1_false_and_2_true()">show-template-2</button> </div> <div ngIf="condition2> <button (click)="set_condition2_false_and_3_ ...

angulartypescript

Angular 2 - Alert: (SystemJS) Stack size limit exceeded(…)

Need some help here: Error: (SystemJS) Maximum call stack size exceeded(…) I have a situation where I am facing an error related to the maximum call stack size being exceeded. It seems to be linked to the import of another module in my component. Let&a ...

angular