Icons don't display on warn, info type

[FuckingToasters]

Hello, so let's get straight to the point:

var notyf = new Notyf({
  types: [
    {
      type: 'info',
      background: 'blue',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'info'
      }
    },
    {
      type: 'warning',
      background: 'orange',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    },
  ]
});

// Function to show the success message
function showMessage(msgtype, msg) {
    var showMsg = document.getElementById("showMsg");
    
    // Check if the success message should be displayed
    if (showMsg.dataset.display !== 'false') {

        // Use Notyf for displaying success message
        if (msgtype == 'success') {
            notyf.success({
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'warn') {
            notyf.open({
                type: "warning",
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'info') {
            notyf.open({
                type: "info",
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'error') {
            notyf.error({
                message: msg,
                duration: 9500,
                dismissible: true
            });
        }
    }
}

The issue is, that the icons are not displayd correctly (only if you select everything on a notification modal, you see the icon. Otherwise it won't display.