CSS is not working in my angular component

Question

I am trying to make a simple Angular4 web app that will show and X or O depending on what the rating is. I do not see the X or O in my web app.

The CSS classes in my rat

Answer 1

If you do not want to mess with ViewEncapsulation and still have the styles isolation, you can define the style within your global css file (e.g. styles.scss) by prefixing the component selector:

rating .star.star-full-icon{
    content:'X';
}

This was tested in an Angular 10 web application.