This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.


Autoplay Off
Take topic challenge

Supplemental Videos


Learn how to use the Icon component in Perspective.

Video recorded using: Ignition 8.0


(open in window)

[00:00] In this lesson, we'll talk about icons. Icons are lightweight, simple, visual indicators or displays. They're similar to an image but generally smaller in file size. Because of how lightweight they are, they're ideal to use with other components such as the map component. We do have a dedicated icon component so if I head over to the Perspective Component Palette, under Display, there's an Icon Component, which I'll drag onto my View and we can see it already kind of starts with an icon ready to go. Of course, if I resize the Icon Component, you do notice that the icon itself resizes and scales well, it's not pixelated when I make it larger. It does have a default color, which of course, if you look under the Property Editor, you can see I can change, right, over here or use the palette, of course. We'll keep it dark and simple for now. The way you change or use different icons is with the path property up here. So we're actually using the material library of icons. Let's, just to show you real quick, I'm gonna move my Designer out of the way and you can see we actually have another website over here. So we're actually looking at the material design page here just to show you all of the icons that are included with an installation of Ignition here and if we kind of scroll down just a little bit, you can see that the icon list is starting to be presented. So in this case, we do actually have an alarm icon I would like to use. So, of course, if we head on back to my Designer, the way this works is that you need the name of the icon you want to use and if I select my Icon Component, we simply need to modify this path. Now the first part here, the material/, that's the library of icons. It's possible for you to add your own. For more information, take a look inside of the user manual. But inside of any particular library, you need simply need to type the name of the icon that you want to use so we'll replace the insert part here of the path with alarm and you can see that the image has already updated and that's really all there is to using the icons. Again, other components use them so when you start seeing some of the other components, you'll notice that they have some icon properties but they otherwise work the same, you just simply need to specify the path.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.