O·M·G: libman

2026-07-16

How to Self-Host Tabler Icons in a .NET Project Using LibMan (No NPM or CDNs!)

How to Self-Host Tabler Icons in a .NET Blazor Project Using LibMan (No NPM or CDNs!)

When building a modern .NET Blazor application using Tailwind CSS or daisyUI, you often need a rich icon set like Tabler Icons. While using a CDN link is easy, it introduces external dependencies. On the other hand, installing Node.js/NPM just for icons adds massive overhead to a clean .NET project.

The ultimate solution is LibMan (Library Manager). It allows you to download and self-host the exact icon files you need locally on your server without NPM or live CDN runtimes.

Here is a step-by-step guide to setting this up and updating it for future projects.

Step 1: Install the LibMan Build Package

To ensure your icons automatically download during project compilation or deployment pipelines, add the LibMan build tool to your Blazor project (.csproj) file:

<ItemGroup>
  <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="2.1.175" />
</ItemGroup>

(Alternatively, right-click your project in Visual Studio, choose Manage NuGet Packages, and install Microsoft.Web.LibraryManager.Build).

Step 2: Create the `libman.json` Configuration

Create a file named libman.json directly in the root folder of your Blazor project and paste the following configuration.

Note: In newer versions of the Tabler package, production assets live inside a dist/ subfolder. We also deliberately exclude the old .woff file, as modern browsers only need the highly-compressed .woff2 font file.

{
  "version": "3.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@tabler/icons-webfont@3.44.0",
      "destination": "wwwroot/lib/tabler-icons/",
      "files": [
        "dist/tabler-icons.min.css",
        "dist/fonts/tabler-icons.woff2"
      ]
    }
  ]
}

Step 3: Trigger the Local File Download

Simply saving the JSON file will not immediately download the files. You need to explicitly run the restore command:

In Visual Studio, right-click on your libman.json file in the Solution Explorer.
Click Restore Client-Side Libraries.
Verify your wwwroot folder. You will see a newly populated local folder path: wwwroot/lib/tabler-icons/dist/.

(If you are using VS Code or the CLI, simply run libman restore in your project terminal).

Step 4: Link the Local CSS in Your Blazor Shell

Your Blazor application needs to know where to find the styles. Open your root HTML shell file:

For Blazor Web Apps (.NET 8+): Open Components/App.razor
For Blazor Server/WASM (Older versions): Open wwwroot/index.html or Pages/_Host.cshtml

Add the local CSS link tag inside the <head> section:

<head>
    <!-- Local Tabler Icons (Downloaded via LibMan) -->
    <link rel="stylesheet" href="lib/tabler-icons/dist/tabler-icons.min.css" />
    
    <!-- Your existing site/tailwind styles -->
    <link rel="stylesheet" href="css/site.css" />
</head>

Step 5: Use Icons in Your Components

Now you can jump into any Blazor component (.razor) and display icons alongside your daisyUI classes using standard <i> tags:

<button class="btn btn-primary">
    <i class="ti ti-plus-circle text-lg"></i>
    Add New Record
</button>

How to Update to a New Version in the Future

When a newer version of Tabler Icons is released, you do not need to rewrite your code or hunt down CDN scripts.

Go to the @tabler/icons-webfont npm page to find the latest version number string.
Open your libman.json file and change the version tag in the library name string (e.g., change @3.44.0 to the new version).
Right-click libman.json and select Clean Client-Side Libraries, then click Restore Client-Side Libraries.

LibMan will automatically clear the old assets and safely grab the brand-new ones directly into your project!

Note: If you change your file to "3.0" and encounter restore errors during compilation, it means your current project build tools require the standard "1.0" schema. Simply switch it back to "1.0" to resolve the validation check.