Icon in toast

Is there any way to have icon in toast messages?

1 Like

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

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

1 Like

You can inject HTML in your message prop :wink:

let toast = this.toastCtrl.create({
            message: '<img src = "./assets/your_image.svg"> Your message',
            showCloseButton: true,
            closeButtonText: 'btnText',
            cssClass: 'your-toast-css-class',
            position: 'bottom'
          });

This works fine for me:

let toast = this.toastCtrl.create({
            message: "Your message here",
            position: bottom,
            cssClass: danger,
            duration: 4000,
            showCloseButton: true,
            closeButtonText: ' '

An important detail: closeButtonText must contain a space inside, as in the example above.

In your app.scss paste the following code:

ion-toast.danger {
    .toast-wrapper {

      max-width: 90%;
      max-height: 90%;
      text-align: left;
      border-radius: 20px;
      box-shadow: 0px 0px 13px 2px rgba(156, 156, 156, 1);
      margin: 5%;
      opacity: 0.8;
      background-color: #232323;
    }
    .toast-message {
      font-weight: 500;
      font-size: 1.2em;
      color: #ffffff;
    }
    .toast-button{
      opacity: 0.8;
      background-image:url('https://image.flaticon.com/icons/svg/148/148766.svg');
      background-repeat: no-repeat;
      background-position: center;
      border: none;
      margin-right: 10px;
    }
  }

For change the icon, just change the image-background url in the toast-button.

I am Brazilian, so please forgive me if there are any spelling errors in this text.

I hope it helps us.

It dont works, i try this…