HealtCheckUI in .NET - issues with icons

Question

I start play with HealthCheck in .NET 8 and I added UI to my project. However I have issues with icons.

I'm not quite sure why I have got 404 for this file.

The configuration looks really simple:

services.AddHealthChecksUI()
        .AddInMemoryStorage();

app.MapHealthChecks("/api/health", new HealthCheckOptions
{
    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
});
app.MapHealthChecksUI(setup =>
{
    setup.ApiPath = "/api/health";
});

Anyone know how to fix it?

Bobbi

Answer 1

There is an open issue on GitHub: https://github.com/Xabaril/AspNetCore.Diagnostics.HealthChecks/issues/2130

Temporary solution

You can download fonts from their repository: https://github.com/Xabaril/AspNetCore.Diagnostics.HealthChecks/blob/master/src/HealthChecks.UI/assets/fonts/material.woff2

Place it on the wwwroot/ui/resources then instead of material.woff2 set name 1ae4e3706fe3f478fcc1.woff2.

If you don't have already registered static files in your Startup.cs or Program.cs then use the following code:

builder.WebHost.UseWebRoot("wwwroot");

var app = builder.Build();

app.UseStaticFiles();

Credits go to dougcunha from the GitHub answer.

Respiration

Thank you for sharing this answer, and for being considerate enough to offer proper credit. – Signesignet

Answer 2

Include the contents of https://fonts.googleapis.com/icon?family=Material+Icons in your custom.css-file.

You can add your custom.css (full path) in the Program.cs like this:

config.MapHealthChecksUI(options => options.AddStylesheet("...customs.css"));

The config variable here is of type IEndpointRouteBuilder.

The current contents are:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v141/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Devotion

in .Net 8 this is now AddCustomStylesheet() – Gwyngwyneth

Right. Now it is: config.MapHealthChecksUI(options => options.AddCustomStylesheet("...customs.css")); – Devotion