It is important to have a professional looking 3D interface for Mixed Reality applications created for Microsoft HoloLens 2. Part of that are the menus which consist of several buttons. The MRTK has a great set of prefabs for menus which includes buttons where you can select from a small set of icons. My design skills are not great. Creating my own icons is therefore not easy and i rely on available libraries. One of those libraries is the Office Fabric UI library. It contains a large set of beautiful icons which i like to use for the buttons in our Mixed Reality applications. In this post i will explain how to do this.
Menus and buttons
In this example i will be using the NearMenu4x1 which contains a button collection based on PressableButtonHoloLens2 buttons. Each of those buttons contains a Button Config Helper script which allows you to select an icon from an icon set for your button. By default you have the DefaultIconSet present in the MRTK. And if you have installed the examples you also have the ExamplesIconSet. While both sets contains several nice looking icons, you are often looking for someting else. Why not have an own icon set containing my own nice looking icons which i can use for buttons? And why not using cool icons from the Office UI Fabric Icon collection? This is possible and i’m going to explain how.
Create an icon set
In the first step we need to create an icon set. This is actually very easy. Make sure you create a new folder under Assets. In that folder select right mouse click for the menu. Look for Create > Mixed Reality Toolkit > IconSet.
Name the new icon set to OfficeFabricIconSet. Icon sets can be build based on Quad icons, Sprite icons and Font icons. The easiest way is to use Quad icons. These icons can be several different formats like png. That is one the formats i love to use since the quality is high and the size stays low. Create a folder called Textures to store the icons as shown below.
Office Fabric UI icons
Lets get an icon from the Office Fabric UI icon set. Go to the URL https://uifabricicons.azurewebsites.net/ and search for an icon. In this case i’m looking for a construction cone.
While hovering above you get the name of the icon which is ConstructionCone. Now go to the Render Office Fabric UI Icons into Canvas tool made by Josh McCarty. This is an easy and nice tool for creating a png image from an icon. The tool can be found at https://codepen.io/joshmcrty/pen/GOBWeV.
Enter the icon name as mentioned from the hovering above the icon in the Office Fabric UI Icon library. To have the right format use the following specifications.
- Set the font size to 350px
- Set the width and height to 512px
- Set the left and top offset to 256. This takes care of having the icon in the middle
- Set the background color to black and the foreground color to white.
Press the Download the image button to download the icon as a png file. Since we require a transparent icon we need to remove the black. Use any editor you want. I used Adobe Photoshop to select the black areas and removed them.
Add the image as a texture to the icon set
Paste the png file into the Textures folder in Unity. In the example below you will see several icons created for our icon set.
Click on the png file in Unity to open the inspector window. Make sure you have Alpha is Transparency checked. Press the Apply button to apply the change.
We need to add the icon to our icon set. Click on the FabricUIIconSet to open the inspector window. Open the Quad icons and set the size the appropriate number of icons.
Select the icon by pressing the selector at the end of the element or drag the icon into the element itself. And that’s it!
Assign the icon to the button
In the final step we need to assign the icon to the button. Select one of the PressableButtonHoloLens2 buttons in your hierarchy. This will open the inspector window. Check the Button Config Helper component. Change the icon set to your new OfficeFabricIconSet. All icons part of your set will appear below. Select the appropriate icon for your button.
Conclusion
It is very easy to create your own icon set which can be used for buttons in the MRTK prefabs. While it is not that easy to use icons from the Office Fabric UI library, the tool to export them as png will definitely help. As a non designer this allows me to create beautiful buttons without any design skills.