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.jsonfile in the Solution Explorer. - Click Restore Client-Side Libraries.
- Verify your
wwwrootfolder. 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.htmlorPages/_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.jsonfile and change the version tag in the library name string (e.g., change@3.44.0to the new version). - Right-click
libman.jsonand 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.
