Add Material Icon inside MaterializeCss Toast?

426

June 28, 2017, at 03:10 AM

Is it possible to add an icon inside a materializecss toast message?

I tried doing it like this but got '[object-object]' returned inside the toast:

var $printerIcon = $('<i class="material-icons print"></i>');
Materialize.toast($printerIcon + 'Your print job was sent',4000);

Answer 1

The problem is, that Javascript tries to convert $printerIcon + 'Your print job was sent' to a string.

Try adding the text inside the markup like so:

const printerIcon = '<i class="material-icons print"></i>';
const toastMessage = 'Your print job was sent';
const $toastContent = $( `${ printerIcon } ${ toastMessage }` );
Materialize.toast( $toastContent, 4000 );

POPULAR ONLINE

Change CSS styles based on width of page using jQuery

How to generate multiple form and print it with a printer [on hold]

PIL.save() not saving different quality versions of image

jQuery - Quiz results based on correct answers

Xdebug does not stop on breakpoints - PHP centos Docker

display: block css is not working in div element?

here is my code:

319

CSS

Stop floating div before a specific div (universal)

I am trying to make a div float and then stop before a specific div (in this case; the footer), it works on my screen, but when trying in a larger screen, the floating div is a little higher

236

CSS

Iframe exceeds a div in a parent web page

I am embedding an video in a parent website where the iframe is a bit longer than the div

332

CSS

Expand/collapse multiple bootstrap table rows

I have a Bootstrap table that shows three rows of data plus a header row by defaultRow 5 has a button that says "more

552