Introduction

This guide will help you enable the old FamFamFam icon set in new Ext.NET 7 set ups.

The FamFamFam Icon Set

The slick famfamfam icon set has been used in Ext.NET since its early versions and meshed up really well with the initial themes provided by it. If one's to use the Gray, Classic (often called "Blue"), Neptune and perhaps even Crisp and Triton, these icons have historically filled and enriched Ext.NET pages with user friendly images to illustrate buttons, panels, and other components' functionality.

Ext.NET 5 and previous versions have a comprehensive list of the icons supported. This is the example in Ext.NET 5: Miscellaneous > Icon > Icon Summary

Installing the icon set

To install this icon set in your already working Ext.NET 7 project, you need to download the slick icon set from the Fam Fam Fam website. At the time of the writing of this guide, latest version was 1.3, dated back roughly 15 years ago!

The download link for the slick icon set is available at this address.

After downloading the package, simply decompress the zip file and place the files under its icons/ folder in the location of preference within your project.

For this guide, we're going to use the wwwroot/resources/famfamfam_icons/ folder to place our icons in.

This should be all needed to install the icons in the project.

Set up icons

To make it easier to assign icons to components in your Ext.NET pages, we'd better draw CSS blocks for the desired icons. Basically the structure for each icon class should look like this:

.icon-<icon_name_here> {
    background-repeat: no-repeat;
    background-image: url(/resources/famfamfam_icons/<icon_name_here>.png) !important;
}
But there are exactly 1,000 icons in the pack (isn't that a lot? impressive!), and maybe creating a block for each one of these is a bit overkill if you are going to use just a couple. So, for example, if all you need is the old Ext.NET's icon="Add" and icon="PageExcel" to your page, this CSS should suffice:

.icon-add {
    background-repeat: no-repeat;
    background-image: url(/resources/famfamfam_icons/add.png) !important;
}
.icon-page-excel {
    background-repeat: no-repeat;
    background-image: url(/resources/famfamfam_icons/page_excel.png) !important;
}
But, if you want it for every single icon, this code block may be imbued on your page to dynamically generate the css (and you may want to just save it as a .css file for faster reference on the long run):

<style type="text/css">
    @{
        var fullPath = System.IO.Path.Combine(Model.HostingEnvironment.WebRootPath, "resources", "famfamfam_icons");
        var dir = new System.IO.DirectoryInfo(fullPath);
        foreach (var file in dir.EnumerateFiles("*.png"))
        {
            @:.icon-@file.Name.Substring(0, file.Name.Length - file.Extension.Length) {
            @:    background-repeat: no-repeat;
            @:    background-image: url(/resources/famfamfam_icons/@(file.Name)) !important;
            @:}
        }
    }
</style>
Notice we use a nonstandard Model.HostingEnvironment reference here. This is made available, in the model page, by:
- using [var]Microsoft.AspNetCore.Hosting
- defining the public/readonly model variable as public readonly IWebHostEnvironment HostingEnvironment;
- injecting the IWebHostEnvironment parameter to the page model via its constructor.

The constructor code just implementing this, from a default RazorPage model, should look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyProject
{
    public class MyPageModel : PageModel
    {
        public readonly IWebHostEnvironment HostingEnvironment;

        public MyPageModel(IWebHostEnvironment env)
        {
            HostingEnvironment = env;
        }

        public void OnGet()
        {
        }
    }
}
All the other using directives are added by the RazorPage template itself.

And, all this just necessary if you want to dynamically build the full 1,000 list of possible icons.

Using the icons

And, finally, to actually use the icons, simply use iconCls="icon-<name>".

<ext-button text="My button" iconCls="icon-page_excel" />
With the model code above, the MyPage.cshtml's code should be something like this:

@page
@model MyProject.MyPageModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>FamFamFam Icons on Ext.NET 7 and Gray Theme</title>
    <ext-resourceManager theme="gray" />
    <style type="text/css">
        @{
            var fullPath = System.IO.Path.Combine(Model.HostingEnvironment.WebRootPath, "resources", "famfamfam_icons");
            var dir = new System.IO.DirectoryInfo(fullPath);
            foreach (var file in dir.EnumerateFiles("*.png"))
            {
                @:.icon-@file.Name.Substring(0, file.Name.Length - file.Extension.Length) {
                @:    background-repeat: no-repeat;
                @:    background-image: url(/resources/famfamfam_icons/@(file.Name)) !important;
                @:}
            }
        }
    </style>
</head>
<body style="padding:10px">
    <ext-button text="My button" iconCls="icon-page_excel" />
    <ext-panel title="My panel" iconCls="icon-pencil_go" html="Panel contents go here" width="200" height="100" />
</body>
</html>
The page's output should look like this:

Click image for larger version. 

Name:	63182_result.png 
Views:	19 
Size:	5.1 KB 
ID:	25551

The Gray Theme

If you simply use the example above, you may notice an exception about the Gray theme not being available. In order to enable the theme, it is necessary to perform two steps:

1. Install the Ext.Net.Classic.Theme.Gray NuGet package from NuGet package manager
2. Register the theme resources in Startup.cs' Configure() method, under the app.UseExtNetResources() call, by adding config.UseThemeGray() next to (or replacing) config.UseThemeSpotless.

To also set the theme application-wide (thus remove the need of the ext-resourceManager lines in your pages), in Startup.cs' Configure() method, under the app.UseExtNet(), pass config.Theme = ThemeKing.Gray as a config parameter, e.g.:

app.UseExtNet(config =>
{
    config.Theme = ThemeKind.Gray;
});
By default, Ext.NET 7 comes with the Spotless theme, so in the default configuration there should already be similar lines including the resources to Spotless.

Conclusion

So, with a few steps, you can set up your Ext.NET 7 project to look exactly like old Ext.NET 5 and previous versions, on "classic" themes like Gray, Blue, Crisp or Neptune.