04
Feb

Using Icon Fonts in Wisej.NET with HTML Content

Wisej.NET comes with a powerful icon system built around embedded resources and the resource.wx handler. This system is optimized for SVG icons: it can recolor monochromatic icons on the fly and efficiently caches them in the browser.

That said, some applications prefer or already rely on icon fonts—for example Font Awesome—to keep visual consistency with existing web assets or to take advantage of a large icon catalog.

The good news: using icon fonts in Wisej.NET is simple and fully supported through standard HTML and CSS.

This post shows how to:

  • Add an icon font (Font Awesome) to a Wisej.NET application

  • Render icons inside Wisej.NET controls

  • Use icons in labels, buttons, and DataGridView cells

  • Detect clicks on specific icons using the role attribute

Adding Font Awesome to a Wisej.NET App

Wisej.NET applications include a Default.html file, which is the perfect place to load external CSS resources. To use Font Awesome, simply add the stylesheet link to Default.html.

Example: Default.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>Wisej Application</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
  </head>
<body>
</body>
</html>

Once this file is loaded, Font Awesome icons are available everywhere in your Wisej.NET application.

Enabling HTML Content in Wisej.NET Controls

By default, Wisej.NET controls treat text as plain text. To render HTML (including <i> tags for icons), you must enable it explicitly.

 label1.AllowHtml = true;

This applies to many controls, including:

  • Label
  • Button
  • DataGridView cells
  • CheckBox
  • RadioButton
  • LinkLabel

Rendering a Font Awesome Icon in a Label

With HTML enabled, adding an icon is straightforward.

label1.AllowHtml = true; label1.Text = "<i style="color:red" class="fa-brands fa-github"></i> GitHub"; 

What’s happening?

  • <i> is the Font Awesome icon element

  • fa-brands fa-github selects the GitHub brand icon

  • Inline styles (or CSS classes) control color and size

Using Icons in Buttons

Buttons work the same way as labels.

button1.AllowHtml = true; button1.Text = "<i class="fa-solid fa-download"></i> Download";

This makes it easy to create visually rich buttons without managing separate image resources.

Using Icon Fonts in a DataGridView

HTML-enabled cells allow you to embed icons directly into grid data.

dataGridView1.AllowHtml = true; dataGridView1.Rows.Add( "<i class="fa-solid fa-pen"></i>", "<i class="fa-solid fa-trash"></i>" );

You can mix icons and text freely in each cell.

Detecting Clicks on Specific Icons

A powerful feature of Wisej.NET is the ability to detect clicks inside HTML content. By adding a role attribute to an icon, you can identify which element was clicked.

Example: HTML with Roles

label1.AllowHtml = true; label1.Text = "<i class="fa-solid fa-pen" role="edit"></i> " + "<i class="fa-solid fa-trash" role="delete"></i>";

Handling Clicks

Subscribe to the MouseClick event:

label1.MouseClick += label1_MouseClick; 
private void label1_MouseClick(object sender, MouseEventArgs e)
{ 
  switch (e.Role) 
  { 
    case "edit": Wisej.Web.MessageBox.Show("Editicon clicked"); break;
    case "delete": Wisej.Web.MessageBox.Show("Delete icon clicked"); break;
  }
}

Why this is useful

  • No need for separate buttons or controls

  • Keeps UI compact and expressive

  • Perfect for grids, toolbars, and inline actions

When to Use Icon Fonts vs. Wisej.NET Icons

Wisej.NET SVG Icons

  • Automatic recoloring

  • Optimized caching

  • Best integration with themes

Icon Fonts

  • Huge icon libraries

  • Familiar HTML/CSS workflow

  • Ideal for porting existing web UIs

Both approaches can coexist in the same application, letting you choose the right tool for each scenario.

Conclusion

Wisej.NET makes it easy to integrate traditional web assets like icon fonts without sacrificing performance or flexibility. By enabling HTML content and loading a CSS library such as Font Awesome, you can:

  • Add rich icons to any control

  • Style them using standard CSS

  • Handle clicks at the element level

This approach is especially useful for applications migrating from web technologies or needing access to large icon sets. Happy coding!