MARKETPLACE
PLUGINS
DROPDOWN WITH ICON PRO
Dropdown with Icon PRO logo

Dropdown with Icon PRO

Published October 2024
   •    Updated January 2026

Plugin details

Enhance your app with dynamic dropdowns featuring customizable icons. Perfect for navigation, form inputs, or filtering options with a wide range of icons and sub-options.

$5

One time

stars   •   0 ratings
10 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

- Install the plugin - From static or dynamic select one option.
- For static choices, each option is separated by enter or newline
- Use option sets or a database to display different options for dynamic choices.
- This plugin handles all icons.
    - For font awesome v4 you can store it as
.
    - For font-awesome v6 sub-options store the icon as
      pen-to-square-regular/brands/solid enclosed in [fa].
    - For images, the process is the same as for images  
      stored.
    - For material icons store the name of the respective
      material icon.
         - For material icons, sub-options store the icon as
           add_location_alt-rounded/outlined/two-tone/sharp.
         - By default, the material icon is filled.
    - You can store ionic icons as [ion]return-down-
       back[/ion].
        - For ionic icons sub-options store the icon as return-
          down-back-outline/sharp.
        - By default, the ionic icon is filled.
    - For phosphor icons you can store it as [ph]address-
      book-tabs[/ph].
        - For phosphor icons sub-options store the icon as
          address-book-tabs-fill/thin/light/bold/duotone.
        - By default the ionic icon is regular.
     - For bootstrap icons, you can store it as [bi]bookmark-
       star-fill[/bi].
     - For feather icons you can store it as [ft]user-minus[/ft].
     - The icon is saved in selected_icon state and the option
        is saved in selected_option.

Dropdown with Icon Display: This element allows you to visually display the selected state from the plugin. For instance, if you'd like to show an Ionic icon alongside text, simply input the desired icon in the "Icon" field and the corresponding label in the "Text" field. The chosen option will then be presented seamlessly within the text element, offering a clear and user-friendly representation of the selection.

🔗Editor Page: https://bubble.io/page?id=chakor-plugin-demo-2&tab=tabs-1&name=dropdown_with_icon_pro&type=page
🔗Demo Page: http://chakor-plugin-demo-2.bubbleapps.io/version-test/dropdown_with_icon_pro

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble