# SP-Picker Menu Items Icons

**URL:** https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769
**Category:** UXP Plugin API
**Created:** [June 8, 2022, 2:48pm UTC](https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769 "2022-06-08T14:48:22Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![IanBarber](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@IanBarber](https://forums.creativeclouddeveloper.com/u/IanBarber)
#### Post date: [June 8, 2022, 2:48pm UTC](https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769/1 "2022-06-08T14:48:22Z")

</div>

Using the SP-Picker has anyone managed to use Icons in the drop down list

---

<div class="post-metadata">

### Author: ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [June 8, 2022, 3:00pm UTC](https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769/2 "2022-06-08T15:00:19Z")

</div>

Didn’t bother to style properly (probably you don’t even need the `<div class="icon">`), but here you go

```auto
<sp-picker>
  <sp-menu slot="options">
    <sp-menu-item value="">
      <div style="display: flex; flex-direction: row;">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">{ALL SVG STUFF}</svg>
        </div>
        Layers
      </div>
    </sp-menu-item>
    <sp-menu-item value="" selected="true">
      <!-- ... -->
    </sp-menu-item>
  </sp-menu>
</sp-picker>

```

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/3/333dfd26191e100b617df96f648589832be92094.png)

---

<div class="post-metadata">

### Author: ![IanBarber](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@IanBarber](https://forums.creativeclouddeveloper.com/u/IanBarber)
#### Post date: [June 8, 2022, 5:06pm UTC](https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769/3 "2022-06-08T17:06:09Z")

</div>

@Karmalakas Thank You for the code appreciated.  
This brings me to something else which has been on my mind.

```auto
slot="options"

```

What does this slot do, I see it a-lot in code examples

---

<div class="post-metadata">

### Author: ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [June 8, 2022, 5:21pm UTC](https://forums.creativeclouddeveloper.com/t/sp-picker-menu-items-icons/4769/4 "2022-06-08T17:21:15Z")

</div>

Most likely some Spectrum specific stuff 🤷‍♂️

If you check `sp-dropdown` [UXP docs](https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-spectrum/User%20Interface/sp-dropdown/), you’ll find it in the example, but I personally couldn’t make `sp-dropdown` work in UXP, so had to improvise and started experimenting by mixing Spectrum Web Components with Spectrum UXP and `sp-picker` (which is not even documented under UXP) worked just fine.

So basically I have no certain answer 🙂 I assume it’s similar to `slot="icon"` - like defining as a placeholder or something. I mean, probably there’s some placeholder inside `sp-` components and defining it as an attribute, puts that element into that placeholder. I’m purely speculating here 😃