[00:00] In Perspective, images can be uploaded, referenced and embedded using the image components. In this lesson, we're going to talk about another kind of Perspective graphic known as an icon. Icons are designed to be small pre-configured images of scalable vector graphic, or SVG type. As their name suggests, icons are typically basic symbols designed to show a single graphical element that might be helpful in prompting specific user interactions. Icons are already incorporated into several of the more complex Perspective Components such as the map and many tree components, and can also stand alone on icon components. Although icons can not be added or removed using the image management utility, Perspective does come with a large library of them built-in and more can be added at any time. As I mentioned, we do have an icon component available. So if I head over to my Perspective Component palette, under Display, there's an icon component, which I'll drag into my view here.

[01:05] The component starts with an icon ready to go. Remember that icons are ultimately SVG images, which means that stretching and scaling the component won't result in any pixelation. An icon can be arbitrarily small or arbitrarily large. As to the properties on the components, the first is a path property, which indicates which icon we should show. The magnifying glass on the right-hand side makes it easy to pick a different icon. So I'll click that. The first thing we see at the top of this menu is a dropdown, which allows us to choose an icon library. Different libraries will contain different icons, and it's possible to add our own libraries as well. Currently, we're looking at the material library, which contains the bulk of the pre-configured icons that come with Perspective. So how about I select this nice bed icon and double click? And that will configure our component to use that icon, which we can see is material slash hotel. Below the path property, we also have the ability to override the default color of the icon if desired, as well as configure some more standard stylings.

[02:10] So now that we've seen a basic icon components, let's look at how we can add our own icons into the system. To do this, we actually need to modify the Ignition install files on the gateway. If I pull over my File Explorer here, we can see that the path we need to access is starting from the Ignition installed directory, data, modules, perspective, icons. Remember that icons are actually SVGs behind the scenes and to that end, each SVG file you see in the icons folder here is a different icon library. The name of the file will dictate what the library is called. From here, I have a file prepared that I can add into this folder. And dragging over from another monitor, we can see what this file looks like. This file contains two icons, one Red Circle, and one Blue Circle.

[03:04] Similar sample files are available in the user manual. The important thing to note here is that each icon is enclosed in an SVG tag with two attributes defined. A viewBox attribute, specifies the natural dimensions of the graphic, which need to be large enough to fully enclose it and an ID attribute, which specifies the name of the icon. As long as our file has this same general structure, we shouldn't run into too much trouble using these icons in Perspective. So from there, I'm just going to use the File Explorer to drag this file into the icons folder, making sure that I have the requisite system permissions to do so. And with that, after a Designer restart, we'll be able to use our new icons in perspective development. So as we've seen, icons could be a great approach to simple and custom graphics and symbols in Perspective.