Is any possibility to add ionic icon inside alert

Ionic Framework Ionic Vue
1

Is any possibility to add ionic icon inside alert, i have tried like this, but it didn’t work, it display as plain text.
i’m using ionic vue 8.2

onMounted(async () => {
addIcons({ ‘checkmark-circle-outline’: checkmarkCircleOutline });
});

const presentAlert = async () => {
  const alert = await alertController.create({
    header: 'Alert with Icon',
    // Use the IonIcon within the message or header
    message: `<div style="display: flex; align-items: center;">
                <ion-icon name="checkmark-circle-outline" style="font-size: 24px; margin-right: 8px;"></ion-icon>
                <span>This is an alert with an icon!</span>
              </div>`,
    buttons: ['OK']
  });

  await alert.present();
};
2

HTML is sanitized by default in several Ionic components including the IonAlert.

You can either enable HTML globally or by a case-by-case basis. See Security for Angular, React, and Vue Apps - Ionic Framework.

Globally, you add innerHTMLTemplatesEnabled: true in your main.ts file where you call createApp:

const app = createApp(App)
    .use(IonicVue, {
        innerHTMLTemplatesEnabled: true,
    })
    .use(router)
    .use(pinia)
3

Thank you, it is works fine now

1 Like
4

@twestrick
is any way to add icon to header?
it is show as plan text?

5

See many examples of icons in headers at Ionic Vue Components. Open each one, click the copy icon to copy the code to use in your project.

The code is also on GitHub: vue-components/src/components/toolbars at main · dolthead/vue-components · GitHub.

6

i mean alert header @dolthead, do you have any idea?

7

:man_shrugging:t2: no, unless you build your own simple alert component and open it as a modal.

8

You can just create your own header in the message prop. Appears it strips out any style attributes but does leave classes.

<ion-alert
    trigger="present-alert"
    message="<h1 class='header'><img src='https://placehold.co/30x30?text=I' /> Test</h1>A message should be a short, <i>complete sentence</i>."
    :buttons="alertButtons"
  />