Icon in toast


#1

Is there any way to have icon in toast messages?


#2

So far I know is it not possible, only possible with CSS.
Here an example to add the CSS attribute to the ToastController.
Inside the CSS you always can set an image or something.

Hope it helped a little


#3

Its not pretty, but you can add the css of the icon using the styling solution like this:

.your-toast-css-class {
.toast-button:before {
    font-family: "Ionicons";
    margin-top: -14px;
    margin-left: -75px;
    z-index: 999;
    position: absolute;
    font-size: 2.2em;
    content: "\f366";
  }
}

The “\f366” is the value for the refresh icon, you can add the icon you want in other parts of your code and inspect to get the proper value.

and the toast:

let toast = this.toastCtrl.create({
            message: 'Your message',
            showCloseButton: true,
            closeButtonText: 'btnText',
            cssClass: 'your-toast-css-class',
            position: 'bottom'
          });

Hope it helps