[Styling Module, JS Module, JS+Editor Module] Customize icon color

[Dimi27]

Module post template

Customize the icon color

Version: 1.0
Creator: Dimi27

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Horizontal Buttons Stack
• Media Player
• Pop Up
• Select
• Separator

A list of predefined colors to customize the icon color.
This module was copied and edited from
Example: Customize the icon container color - Clooos.
Configure this module via the editor or in YAML, for example:

icon_color: 
    color: YOUR_VALUE

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

icon_color:
    name: "Customize the icon color"
    version: "1.0"
    creator: "Dimi27"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button
        - calendar
        - climate
        - cover
        - horizontal-buttons-stack
        - media-player
        - pop-up
        - select
        - separator

    description: |
        A list of predefined colors to customize the icon color.
        This module was copied and edited from
        Example: Customize the icon container color - Clooos.
        <br><br>
        <code-block><pre>
        icon_color: 
            color: YOUR_VALUE
        </pre></code-block>

    code: |
        .bubble-icon {
            color: var(--${this.config.icon_color?.color}-color) !important;
          }
        

    editor:
      - name: color
        label: Color
        selector:
          ui_color:
            include_none: true
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️