Adding a custom svg to snackbar

[corganfuzz]

is it possible to add custom SVG icons within the IgxSnackBar ? like next to the message prop

[kdinev]

@corganfuzz We haven't exposed such an option, because the material guideline for snackbars says that icons shouldn't be placed in the snackbar:

https://material.io/design/components/snackbars.html#anatomy

That's why we've exposed only the message and the action buttons as string inputs.

[corganfuzz]

Certainly, however there has been a couple of cases where material-ui snackbar is used in several apps where you will wanna put 3 loading dots (...) to give the appearance that something is actually loading.
which sometimes is the point of a snackbar

I'm trying to style the snackbar with and ID to achieve that, but that just modifies the whole snackbar and no text inside, either that or a moving gif or icon will do.

In angular material you can put the pizza emoji on. , altough thats not very helpful in my case
ng-pizza

[SlavUI]

@StefanIvanov what do you think ?

[kdinev]

@corganfuzz I see your point. I think that we can make the message be ng-content inside the snackbar, rather than an input, which will allow you to display some kind of progress inside.

If you're currently using the snackbar as an indeterminate progress indication (loading indicator), then you should know that we have already started working on a component that is for that purpose. It would appear in the next major release, most probably. Would you like us to keep you posted about on the progress?

[StefanIvanov]

First, I would like to ask @corganfuzz if they have considered using the igxBanner, which was recently released. It supports an icon as you can see in #2672 and overcomes the by-design limitation of the Snack Bar which we have followed in order to comply with the Material Guidelines.

@kdinev's has a good point regarding the ng-content but if we were to take that path we would delegate developers the responsibility to comply with the Material Guidelines, which may not be always desirable.

[corganfuzz]

@StefanIvanov so according to the description a banner is more like a dialog, right?. I have not seen a working example yet. In this case, I need to use a snackbar because it adapts better to a single component rather than the whole page (which is the case of a dialog) I know it could be customized for it, but I feel the snackbar suits it better, just need those 3 loading dots or an icon.

[kdinev]

@corganfuzz The banner is very similar to a snackbar, with the difference being that it goes on top of the app, below a nav bar, if there's such, and can have more content than a snackbar. Our banner component made it into 7.0.2, but we still haven't published the docs and samples for it. They will appear live some time this week.

https://material.io/design/components/banners.html

[StefanIvanov]

@corganfuzz the banner appears on the same level as the content it details, which is visually different than a snackbar and a dialog that appear on top of it. Moreover, it usually details or summarizes in a way a collection of items / elements, so if such a collection is the Angular component you are talking about. I have one more question though, do you have some actions within your SnackBar. What does your app user do upon seeing the information in the SnackBar or at least what they are expected to be doing?

[corganfuzz]

@StefanIvanov the user waits for the data on the grid to load. In our particular scenario, our server goes down all the time ( mostly the weekends) so if data is not present either a pending state or a 500 error, the snackbar gets replaced by red snackbar with a close button on it indicating the server is down.

[kdinev]

@corganfuzz We will introduce ng-content inside the snackbar, so you can put a loading indicator next to your message. We will retain the message input for backwards compatibility.

[StefanIvanov]

Moreover, we have updated the specs of our circular and linear progress bars to contain the stories for indeterminate mode and are currently working on providing these as new features to the aforementioned components. This would be a proper indication for lengthy operations like the experience you outlined.