I would like add icon in my Alert Message but it seems to disappear after building.

Here's the code:

openAppointmentPop(){
    let appointmentpop = this.alertCtrl.create({
        title: 'Rendez-vous',
        message: `
            <p><ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> 26 février 2016</p>
            <p><ion-icon name="pin"></ion-icon> 52, rue des Paquerette</p>

            `,
    buttons: [
      {
        text: 'Modifier',
        handler: () => {
          console.log('Disagree clicked');
        }
      },
      {
        text: 'Retour',
        handler: () => {
          console.log('Agree clicked');
        }
      }
    ]           
    });
    appointmentpop.present();
}

And the result:

<div class="alert-message" id="alert-msg-0">
    <p> 26 février 2016</p>
    <p> 52, rue des Paquerette</p>    
</div>

I really don't know how to proceed to get what I want. Any ideas?

I would like add icon in my Alert Message but it seems to disappear after building.

Here's the code:

openAppointmentPop(){
    let appointmentpop = this.alertCtrl.create({
        title: 'Rendez-vous',
        message: `
            <p><ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> 26 février 2016</p>
            <p><ion-icon name="pin"></ion-icon> 52, rue des Paquerette</p>

            `,
    buttons: [
      {
        text: 'Modifier',
        handler: () => {
          console.log('Disagree clicked');
        }
      },
      {
        text: 'Retour',
        handler: () => {
          console.log('Agree clicked');
        }
      }
    ]           
    });
    appointmentpop.present();
}

And the result:

<div class="alert-message" id="alert-msg-0">
    <p> 26 février 2016</p>
    <p> 52, rue des Paquerette</p>    
</div>

I really don't know how to proceed to get what I want. Any ideas?

• javascript
• html
• ionic-framework

• You might want to consider creating a modal instead of an alert – user1752532 Commented May 31, 2017 at 7:02

3 Answers 3

You could try something like this:

  private _htmlProperty: string = "<p><span name=\"alarm\" style=\"display:inline-block;font-family:Ionicons;\" class=\"icon icon-md ion-md-alarm\"></span> 26 février 2016</p><p><div name=\"pin\" style=\"display:inline-block;font-family:Ionicons;\" class=\"icon icon-md ion-md-alarm\"></div> 52, rue des Paquerette</p>";

  public htmlProperty() {
    return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
  }

  openAppointmentPop() {
    let appointmentpop = this.alertCtrl.create({
      title: 'Rendez-vous',
      message: <any> this.htmlProperty(),
      buttons: [
        {
          text: 'Modifier',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Retour',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    appointmentpop.present();
  }

Somehow ionic/angular tag is not working in _htmlproperty so we need to use plan html tags and css classes.

Second Option: You could make your own custom popup as suggested here.

As far as I know Ionic2 doesn't support icons in alerts.

There is a feature request on their Github repo: https://github./driftyco/ionic/issues/7874

I have the solution. It works perfectly on Ionic v3, but should work on version 2 as well. See the link below: https://forum.ionicframework./t/icon-in-toast/113750/4