Multiple icon classes using fontawesome

[EdwinvanDessel]

Hi,

Verry happy withvue-toasted. Everything works like a charm except for the icon in my globally registered toast. I have copied/created this global toast for my application:

Vue.toasted.register('infotoast',
  (payload) => {
    return payload.message;
  },
  {
    type: 'info',
    className: 'info-toast',
    iconPack: 'fontawesome',
    icon: {
      name: 'fal fa-info-square'
    },
    duration: 3000
  }
);

But when I execute this code I get the following error message in the console: Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fal fa-exclamation-triangle') contains HTML space characters, which are not valid in tokens.

Apparently the space between fal and fa-exclamation-triangle is not allowed, but without fal the icon is not loaded.

Any suggestions?

Thanks, Edwin

[KarmaCop213]

I've a similar problem. I can't see any exceptions, but the toaster isn't shown and the code after I create the toaster isn't run. What kind of sorcery do I need to do to use font awesome icons?

[shakee93]

by default fontawesome icon pack supports only one class name. if you need to use multiple class name. if you need to use multiple class name use custom-class iconPack, take a look at this example.

https://github.com/shakee93/vue-toasted/blob/50d66a1b7a01a62dab4795dd8a20624b0274633c/examples/using-icons.js#L31-L41

[KarmaCop213]

Thank you! My problem was that I was using in the icon property "fa fa-times", removed "fa" from there and everything is now working as it should.

[shakee93]

Great !!