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

some extra code in Sivuyile TG Magutywa make it complete:

in Snackbar HTML:

  

    

      
    
    

      {{data.message}}
    
  
  

    
  

in SnackBar TS file:

export class SnackbarComponent implements OnInit {

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
    console.log(data);
  }

  ngOnInit() {}

  get getIcon() {
    switch (this.data.snackType) {
      case 'success':
        return {type: this.data.snackType, icon: 'check'};
      case 'error':
        return {type: this.data.snackType, icon: 'faults'};
      case 'warn':
        return {type: this.data.snackType, icon: 'warning_outline'};
      case 'info':
        return {type: this.data.snackType, icon: 'info'};
    }
  }

  closeSnackbar() {
    this.data.snackBar.dismiss();
  }

}

in snackbar service:

export class SnackBarService {
  messageText: string [];
  constructor(
    public snackBar: MatSnackBar,
  ) {
  }
public openSnackBar(message, type, duration?, verticalPosition?, horizontalPosition?) {
    const _snackType = type !== undefined ? type : 'success';
    this.snackBar.openFromComponent(SnackbarComponent, {
      duration: duration || 4000,
      horizontalPosition: horizontalPosition || 'end',
      verticalPosition: verticalPosition || 'top',
      data: { message: message, snackType: _snackType, snackBar: this.snackBar }
    });
  }

}

usage in other component:

constructor(private snackBar: SnackBarService) {}
testSanck() {
   this.snackBar.openSnackBar('User Not Found', 'error');
}