Cannot specify color on ion-chip inside ion-toast

Ionic Framework Ionic Angular
1

I tried the straightforward way:

  async presentToast() {
    const toast = await this.toastCtrl.create({
      message: new IonicSafeString(`You earned <ion-chip color="warning">5 Coins</ion-chip>`),
      position: 'top',
      color: 'light',
      duration: 2000,
    });
    toast.present();
  }

Then tried wrapping it in a component:

  async presentToast() {
    const toast = await this.toastCtrl.create({
      message: new IonicSafeString('You earned <app-coin-chip></app-coin-chip>'),
      position: 'top',
      color: 'light',
      duration: 2000,
    });
    toast.present();
  }

where app-coin-chip is:

<ion-chip color="warning">
  <ion-avatar>
    <img src="../../../assets/images/badge-images/coin.png" />
  </ion-avatar>
  <ion-label
    >Coins
    <strong style="padding-left: 5px"
      >5</strong
    ></ion-label
  >
</ion-chip>

The first approach shows the ion-chip but it always has the same color inherited from the ion-toast. The second approach of wrapping everything in a custom component doesnt work at all. I’m guessing that’s because I’d have to import my component into ion-toast or into the ionic module so its available in there?

No errors though which is a bummer.

Tried with and without IonicSafeString. From the docs: Security - Ionic Documentation

Here’s a stackblitz (IonicSafeString doesnt exist in this version of ionic-angular so the demo doesnt use it. you can try adding it but itll show an import error). https://ionic-angular-v5-6a98ke.stackblitz.io