Anyone can help me? I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct. Source from : /

enter image description here

<script src="@10"></script>

<script>
    function deleteConfirmation(id) {
        var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
        
        Swal.fire({
            title: 'Peringatan',
            text: "Anda yakin ingin menghapus data?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                // redirect to delete data
                location.replace(urlsite);
                // notification
                Swal.fire(
                    'Sukses!',
                    'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
                    'success'
                )
            } else {
                // cancel to deleting data
                Swal.fire(
                    'Batal Hapus!',
                    'Data Anda batal dihapus!',
                    'error'
                )
            }
        })
    }
</script>

Anyone can help me? I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct. Source from : https://sweetalert2.github.io/

enter image description here

<script src="https://cdn.jsdelivr/npm/sweetalert2@10"></script>

<script>
    function deleteConfirmation(id) {
        var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
        
        Swal.fire({
            title: 'Peringatan',
            text: "Anda yakin ingin menghapus data?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                // redirect to delete data
                location.replace(urlsite);
                // notification
                Swal.fire(
                    'Sukses!',
                    'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
                    'success'
                )
            } else {
                // cancel to deleting data
                Swal.fire(
                    'Batal Hapus!',
                    'Data Anda batal dihapus!',
                    'error'
                )
            }
        })
    }
</script>

• javascript
• css
• laravel
• twitter-bootstrap
• sweetalert

• please add code not image – Kamlesh Paul Commented Nov 17, 2020 at 6:34
• Ok, I've added it – Kurniawan Eko Yulianto Commented Nov 17, 2020 at 6:42
• I have same problem here, solution here. – Diego Graziano Commented Oct 29, 2022 at 14:00

4 Answers 4

Depending on your version of Sweetalert the property that sets the icon can be called either 'icon' or 'type', try both. Can't do much more without seeing your code.

try with options

Swal.fire({
    title: 'Batal Hapus',
    text: 'Data Anda batal dihapus!',
    icon: 'error',
})

as per doc https://sweetalert2.github.io/

You can use a custom class to hide one of the icons. Some icons have content in a ::before pseudo-class which doubles up.

Create a custom class

.no-before-icon::before {
    display: none !important;
}

Apply it to all icons - doesn't effect success or error icons

Swal.fire({
     title: "No more double icons",
     icon: "info",
     customClass: {
        icon: "no-before-icon",
    },
});

If you only include the JS file and do not include the CSS file, goes perfect.