Значок Sweet Alert 2 отображается неправильно

Я пытаюсь создать модальное окно, которое появляется при загрузке веб-страницы. Модальное окно открывается, как и ожидалось, но значок и анимация отображаются неправильно. Мои фрагменты кода взяты с веб-сайта SweetAlert2.

<!-- import the sweet alert 2 package from cdn link -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- sample from the sweet alert github website -->
<script>
  Swal.fire({
    icon: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '<a href="">Why do I have this issue?</a>'
  })
</script>

Когда я запускаю код, созданное модальное окно отображает ошибочный значок, как показано ниже:

Из этого вопроса я попытался изменить icon свойство с type, как показано ниже:

<!-- sample from the sweet alert github website with type instead of icon -->
<script>
  Swal.fire({
    type: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '<a href="">Why do I have this issue?</a>'
  })
</script>

Результат выполнения этого кода показан ниже:

Этот код вообще не отображает значок. Я использую SweetAlert2 и операционную систему macOS. Как я могу исправить эту ошибку? Спасибо!