caroso1222 / notyf

👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
https://carlosroso.com/notyf/
MIT License
2.64k stars 195 forks source link

Icons don't display on warn, info type #136

Open FuckingToasters opened 8 months ago

FuckingToasters commented 8 months ago

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.

2024-01-11_10 40 39

Plazzmex commented 4 weeks ago

Hey, I know you probably moved on or figured it out, but maybe someone else will find it useful, because I had the same problem and then i realized you need to set the color of the icon, as mentioned in the readme

Icon color. It must be a valid CSS color value. Defaults to background color.

So the notification is basically shown flush with the background. If you set the color, for example like this:

type: 'info', background: 'blue', icon: { className: 'material-icons', tagName: 'i', text: 'info', color: 'white' }

then it will work.