Anybody have trouble getting Icon to show or having background of Toast not white?

[davem7714]

I think I have everything setup correctly to use Blazored.Toast:

From my MainLayout.razor page:

@using Blazored.Toast.Configuration

<BlazoredToasts Position="ToastPosition.BottomRight"
                Timeout="3"
                IconType="IconType.FontAwesome"
                ErrorIcon="error_outline"
                InfoIcon="info"
                SuccessIcon="fa-solid fa-check"
                WarningIcon="warning"
                ShowProgressBar="@true"
                ShowCloseButton="@true"
                MaxToastCount="3">
    <CloseButtonContent>
        <div>
            <span class="myCloseButtonStyleClass">&times;</span>
        </div>
    </CloseButtonContent>
</BlazoredToasts>

I've been trying different things with the SuccessIcon but no matter which type of Toast I try, no icon shows up.

In my razor page I have the following: @inject IToastService toastService

and

<h1>Blazored Toasts</h1>

<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
<button class="btn btn-success" @onclick="@(() => toastService.ShowSuccess("Referral has been saved!"))">Success Toast</button>
<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
<button class="btn btn-danger" @onclick="@(() => toastService.ShowError("I'm an ERROR message"))">Error Toast</button>

Result for Success Toast:

Results for Info Toast:

Here is what I have in my CSS folder:

I'm registering the following:

      builder.Services.AddBlazoredModal();
      builder.Services.AddBlazoredToast();

Here are my references:

I'd like to be able to have a Toast with white body and the color at the top as well as showing the appropriate Icon.

Similar to what is shown here:

I also noticed that the Title (INFO, SUCCESS, WARNING and ERROR) aren't displaying. Maybe all I need to do is to create custom toasts.

Any help would be appreciated.

[chrissainty]

@davem7714 you have a mix of the old and new versions there. The first screenshot with toasts with solid colour is the pre-v4 version. The white toasts with coloured highlights are v4.

If you want v4 you don't need to supply any icons, you don't event need to provide the icon type.

Also if you've been using the old version, I'd clear you cache to make sure the CSS is updated.

The headings have been removed in v4 (Error, Success, etc...)

[davem7714]

Do I just need to uninstall 3.2.2 and then install 4.0.0 ?

[chrissainty]

Yes. Sorry I missed the package version on your screenshot.

[davem7714]

That did the trick. Thanks!