For both Cloud Portam website and application, when it comes to icons we don’t use images. Almost invariably, we use vector icons and icon fonts (like Font Awesome which BTW are very aptly named; they are indeed really-really awesome :)).
Where Font Awesome didn’t work for us was icons for Azure specific things. In the past, we have been helped by Jigar Patel, who works with my good friend Dinesh Agarwal (who BTW runs an awesome startup called Pro Start Me … do check it out!). But given that Azure is adding a new service almost every month, I felt a bit awkward going to Jigar and Dinesh to ask for new icons (not that they would have said not …. but I remembered that story …. teach a man to fish :)). So this time I thought I will give it a try myself!
The icons are alive and kicking on Cloud Portam’s website at http://cloudportam.com/azure-icon-font. Check them out!
This blog post talks about how I created these icons. For a creatively challenged individual like me whose favorite color is either blue or grey :), it was quite an experience!
Step 1: Download the Visio Files
To begin with, I did not create these icons from scratch! Content team from Microsoft has already done a marvelous job of creating Azure architecture diagrams which are available for you to download and use them in your own presentations, drawings and whatnots. You can download them from here: https://azure.microsoft.com/en-us/documentation/articles/architecture-overview/#symbol-and-icon-sets (direct download link: http://aka.ms/CnESymbols). Download the zip file and extract it. Once you have extracted the files, you would want to go to “CnE_VisioStencils” folders and open “CnE_CloudV2.22.vss” file in Visio. This is where the magic happens :).
Step 2: Create SVG Files
Next step is creating SVG (Scalable Vector Graphics) file for these symbols. Now you can do it either the hard way or the easy way :).
Step 2.1: Create SVG Files – The Hard Way
Visio has this functionality where you can export each item in the stencil to SVG format manually (thus, “The Hard Way”). To convert an item in the stencil to SVG format, select that item, then right click to “Edit Master” context menu item to “Edit Master Shape”.
Even though you don’t see anything on the subsequent screen but just go ahead and save it as a SVG file using File and then Save As option.
Once the file is saved as SVG file, you should be able to load that file in the browser and see how it looks!
Pretty simple huh!
But there are about 100 or so shapes and converting them would take a lot of time! In fact, this is how I started but after I converted about 5 or 10 of the shapes I thought there must be a better way of doing things. That’s when I figured out the easy way.
Step 2.2: Create SVG File – The Easy Way
What’s the easiest way for programmers like us to solve a problem? Write code, obviously :). So I thought, there must be a way to create these files programmatically. A little bit of searching led me to a few questions on Stack Overflow and MSDN documentation and based on that I wrote a console app, which would take a shape and export it in SVG format. Now, that’s simple! Here’s the code I used:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Office.Interop.Visio;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
Application app = new Application();
app.Visible = false;
var doc = app.Documents.Add("D:\\CnE_CloudV2.22.vss");
foreach (var item in doc.Masters)
{
var masterItem = (Master) item;
var fileName = @"D:\Azure Icons SVG\" + masterItem.Name.Trim().Replace("\r", "").Replace("\n", "") + ".svg";
if (File.Exists(fileName))
{
File.Delete(fileName);
}
var shapes = masterItem.Shapes;
foreach (var item2 in shapes )
{
var shape = (Shape) item2;
shape.Export(fileName);
}
}
Console.WriteLine("Done....");
Console.ReadLine();
}
}
}
Step 3: Create Icon Font
Last step in the process is to create the icon font. Again, I didn’t do anything special :). I just used IcoMoon’s Font creator app – https://icomoon.io/app/#/select. Simply head over there, select all the SVG files by clicking on “Import Icons” button, select the icons you want to include in the font and then click on “Generate Font” button to create your own font icon!
It’s as simple as that. Now the import SVG has some quirks and you may have to edit the SVG icons a little bit before you actually create the font but that’s minor stuff. Most of the heavy lifting is done by this app for you.
Once you download the font, you get everything you need to get going even including a demo HTML file that you can use as a reference.
Download
If you don’t want to go through the trouble of doing all of this, the work I have created is available for you to download. You can download it from Cloud Portam’s website at: http://cloudportam.com/azure-icon-font.
Go ahead, download it and use it in your web application! Be sure to let me know your feedback. I know they are not perfect but I think it’s a good starting point. If something is not working out for you, do let me know and I will try my best to get them fixed.
Enjoy!!!
