Share this:

On C# projects, in the “AssemblyInfo.cs” file, you can set the Assembly Version to contain *, which sets the version automatically to the build date and time.

If you comment out the AssemblyFileVersion, then you can see it in the Windows explorer. If you don’t then Windows Explorer will always report the AssemblyFileVersion which does not support the * notation.

This give the correct mimeType to Azure. For some strange reason, it doesn’t have it by default in its configuration, and you’ll get errors when trying to serve the content (404). With these steps done, Azure should be able to serve you static SVG images when you use the correct path (I use /img/ ).

<img src="~/img/database.svg" alt="database">

This should get you a black and white database icon.

3) To use Iconic’s features like CSS styling of the icons, you need to include in your script bundle the iconic.js (or iconic.min.js).

4) Use the data-src attribute in the <img> tag to indicate the Iconic that it must inject the SVG into the document.

5) Create custom CSS markings like the “ok” class to style the icon. I added these in a site-iconic.css file that I include in the bundles.

.ok {
fill: green;
}
.nok {
fill: red;
}

This “ok” class changes the icon fill to green, I have similarly an “nok” class changing the icon to red.

6) If you are using the Razor engine to generate your pages, you can directly assign class names based on the object’s properties. Here I have an object DbServer which has a boolean property isAvailable to show its status.