# \[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items

**URL:** <https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 17, 2023, 5:33am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823 "2023-05-17T05:33:25Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 17, 2023, 5:33am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/1 "2023-05-17T05:33:25Z")

</div>

I'd like to be able to add an icon (with position: left, centre?, right) with colour / styling into the items of a dropdown menu list.

I have a dropdown list where an operator can select items to produce. If the item has already been produced, it will have a check next to it, but they will still be able to select it to make it again. (sounds a bit odd, but that's the requirement)

> **[Add ability to add Icon and styling to Perspective Dropdown items | Voters |...](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/add-ability-to-add-icon-and-styling-to-perspective-dropdown-items)**

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 17, 2023, 8:00am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/2 "2023-05-17T08:00:50Z")

</div>

put this in the markdown component binding like usual  
you'll ofc will have to add some python logic to append the style string based on the required **labels** in de dropdown

(idk if everyone has these Builtin/icons or is it from my test project?)

```auto
styles=".iaDropdownCommon_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png');	}"
	code = """<style>
		"""+styles+"""
	\"></style>""".replace("\n", "").replace("\t", "")
	return code

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de40a697f7cdf17f8a9c0438b3585039bd1a9ced.png)

```auto

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 17, 2023, 9:18am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/3 "2023-05-17T09:18:49Z")

</div>

Coool 🙂 remind me how to assign a data-label to a dropdown item? Or is this literally the `props.option?[0].label` prop value?  
Also (I know I'm being difficult haha) but is it possible to use a [material.io](http://material.io) icon from the material icon library? (or I could just import this into the Image browser I guess - I've already downloaded them all as SVGs)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 17, 2023, 9:24am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/4 "2023-05-17T09:24:33Z")

</div>

> [@nminchin](#):
>
> props.option?[0].label

yes this, tho idk what happens with translations

idk where that material lib is located, but you can put svgs in the content too

```auto
url('data:image/svg+xml;utf8,<svg ...> ... </svg>')

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 17, 2023, 9:36am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/5 "2023-05-17T09:36:54Z")

</div>

Awesome, hopefully this will get me out of trouble for now! Thanks, as always 🙂

PS. this is how icons are used:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db6b9b1d62872725bd4532e5c9714907772f0abc.png)  
I guess I can just plug that in... I'll give it a go

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 17, 2023, 9:42am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/6 "2023-05-17T09:42:06Z")

</div>

yeah i know, it doesnt seem like they directly use the svg file url for the component. But maybe its still accesible elsewhere.

i believe some ppl have added stuff to this library before, you might find it on the forum to get some clues

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 17, 2023, 9:46am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/7 "2023-05-17T09:46:45Z")

</div>

I've got my own SVG libraries, they're all added here:

```auto
c:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons

```

I guess I could always add them to the webserver folder as well 🤔 they're libraries of multiple SVG definitions though, so I wouldn't know how to pull one of them out

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 17, 2023, 9:55am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/8 "2023-05-17T09:55:06Z")

</div>

```auto
url('/data/perspective/icons/material.svg#insert_emoticon')

```

hehe you'll need to add some sizes to it  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc6135de4e5859a5cb07bcaf4e3e8ff7a969184e.png)

might be easier to use it as background img than instead (need a, nonemtpy content still tho)

```auto
styles=".iaDropdownCommon_options [data-label='YourLabel']:before { padding:10px; content:' '; background-image: url('/data/perspective/icons/material.svg#insert_emoticon');	}"

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ce42c0c34d6b443c821b393df8eebf5bd8c78509.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 17, 2023, 10:32am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/9 "2023-05-17T10:32:44Z")

</div>

Very cool 🙂

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1bfdf402b85a7bcaee82aadec62ef6267cbcdd65.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 17, 2023, 4:21pm UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/10 "2023-05-17T16:21:52Z")

</div>

> [@nminchin](#):
>
> data-label to a dropdown item

The `data-label` attribute is the text of the dropdown item as displayed to the user, so it will change along with translations.

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [May 17, 2023, 4:35pm UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/11 "2023-05-17T16:35:37Z")

</div>

this is awesome! thanks for sharing this.

I've been wanting the ability to do this for a long time 😃

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [September 19, 2023, 4:24pm UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/12 "2023-09-19T16:24:53Z")

</div>

> [@victordcq](#):
>
> put this in the markdown component binding like usual

How do I do this? The "usual" part is not clear to me. I have a Perspective drop-down with value - label (1, "Station One"), (2, "Station Two"), and (3, "Station Three"). I want to show a check mark on various workstations.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 20, 2023, 6:44am UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/13 "2023-09-20T06:44:53Z")

</div>

Js injection is done with a **markdown component,** and **turn off the escape html**. Put the code on a binding on the source.  
Careful dont let user data entere these bindings, it could be harmful

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 12, 2024, 8:36pm UTC](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/14 "2024-02-12T20:36:02Z")

</div>

Piggy-backing off victordcq and Felipe\_CRM, I used this method to add unique background colors to each dropdown option:

> [@Change color for each option based on some category for Perspective Dropdown Component](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6):
>
> I finally figured out how to do it. I used the method shared here: In their solution, they were able to set a specific style for each drop down option, adding a checkmark image to certain options. I just modified it to add on to the "styles" variable for each option, and set a background-color rather than adding content. [image] I'm using a list of options that I get from my database (it changes all the time). I loop through these options and check a time variable for the…