How to add Icon inside the Angular material Snackbar in Angular 5

Question

I am new to angular and I am using Angular Material Design for UI.

In my application I have a snackbar .

Now I want to set an Icon inside the snackbar but I trie

Answer 1

For anyone else still looking for this answer, there is a much easier way to do this without creating new components or changing how you call your snackbar.

You can add a class to the material snackbar like this:

this.snackBar.open(message, "Dismiss", {
    panelClass:'error-alert-snackbar'
});

Then in your css, add your class. You might add some colors like this:

.error-alert-snackbar{
    color: white!important;
    background-color:red !important;
   .mat-simple-snackbar-action {
       color:white !important;
   }
}

Next you can use "yourclass:after" to add an icon to that class:

.error-alert-snackbar:after{      
    font-family: "FontAwesome";
    content: "\f071";
}

Where the "content" above is the Unicode version of the font awesome icon name you would normally call. You can always find it on the icon's Font Awesome page under the picture of the icon where if shows you how to call it. In this case its fa-exclamation-triangle. You would normally call it like this

But since you dont have access to the material snackbar html you can add the icon directly to your css class as i have shown and then attach that css class to the snackbar on open as shown

EDIT: I don't know if this is new functionality for the snackbar created after Angular 5 or if it existed at the time of this question.