Search code examples
sweetalert2

Change icon sweetalert with image

I want to ask how can I change icon image in sweetalert with image?

I've tried change icon image in Swal.fire with image from assets, but it's not working

Here's the script

Swal.fire({
    icon: "<?= base_url(); ?>assets/addon-media/icon_information.png",
    html: "Are you sure want to add this ?",
    showCancelButton: true,
    confirmButtonText: 'Yes, Sure',
    cancelButtonText: 'No, Cancel',
})
Solution

  • You can set the image for an icon by using the iconHtml param. Also, if you'd like to remove the default border around the icon, use the customClass param.

    Here's the example:

    Swal.fire({
  title: 'Image icon',
  iconHtml: '<img src="https://picsum.photos/100/100">',
  customClass: {
    icon: 'no-border'
  }
})
    .no-border {
  border: 0;
}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>