# Changing the icon based on an attribute value

**URL:** <https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053>\
**Category:** Developing Nodes\
**Created:** [11 November 2024 06:42 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053 "2024-11-11T06:42:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrT7007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drt7007/32/96303_2.png) [@DrT7007](https://discourse.nodered.org/u/DrT7007)\
**Post date:** [11 November 2024 06:42 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053/1 "2024-11-11T06:42:57Z")

</div>

+++++++++++++++++  
Node-RED v4.0.5  
Node.js v18.20.4  
+++++++++++++++++

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d27ba81d0eae652a763cf42226c04cd89145d927.png)

I want to change the node's icon, depending on the TYPE attribute.

```auto
<script type="text/javascript">
    RED.nodes.registerType('ussd-menu', {
        category: 'function',
        color: '#a6bbcf', // Keep node color static on canvas
        defaults: {
            menuId: { value: "" },
            name: { value: '' },
            ussdText: { value: '' },
            branchLogic: { value: '' },
            preProcessing: { value: '' },
            options: { value: '' },
            menuType: { value: 'NOTICE' },
            inputType: { value: 'ALL' },
            minLength: { value: 1 },
            maxLength: { value: 50 },
            minDigit: { value: 0 },
            maxDigit: { value: 9 }
        },
        inputs: 1,
        outputs: 1,
        label: function() {
            return this.name || 'USSD Menu Item';
        },
        oneditprepare: function() {
            const node = this;

            // Show/hide fields based on MenuType and InputType selections
            function toggleFields() {
                const menuType = $("#node-input-menuType").val();
                const inputType = $("#node-input-inputType").val();

                if (menuType === "INPUT") {
                    $("#node-input-inputType-row, #node-input-minLength-row, #node-input-maxLength-row").show();
                    $("#node-input-minDigit-row, #node-input-maxDigit-row").toggle(inputType === "INTEGER");
                } else {
                    $("#node-input-inputType-row, #node-input-minLength-row, #node-input-maxLength-row, #node-input-minDigit-row, #node-input-maxDigit-row").hide();
                }
            }

            // Attach change event listeners to update field visibility
            $("#node-input-menuType").on("change", toggleFields);
            $("#node-input-inputType").on("change", toggleFields);

            // Initialize visibility on load
            toggleFields();
        },
        icon: function(){
            switch (menuType) {
                    case "INPUT":
                        return 'node-red/switch.svg'
                    case "NOTICE":
                    return 'node-red/fa-comment-o.svg'
                    case "REDIRECT":
                    return 'node-red/fa-forward.svg'
                    default:
                        return 'node-red/fa-wrench.svg'
                }
            return 'node-red/switch.svg'
        },
    });
</script>

<script type="text/html" data-template-name="ussd-menu">
    <div class="form-row">
        <label for="node-input-menuId">Menu ID</label>
        <input type="text" id="node-input-menuId" placeholder="Unique Menu ID" readonly>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Node Name">
    </div>

    <!-- Larger textarea fields for USSD Text, Branch Logic, and Pre-Processing -->
    <div class="form-row">
        <label for="node-input-ussdText">USSD Text</label>
        <textarea id="node-input-ussdText" placeholder="Display Text" maxlength="2000" rows="5"></textarea>
    </div>
    <div class="form-row">
        <label for="node-input-branchLogic">Branch Logic</label>
        <textarea id="node-input-branchLogic" placeholder="Branch Logic" maxlength="2000" rows="5"></textarea>
    </div>
    <div class="form-row">
        <label for="node-input-preProcessing">Pre-Processing</label>
        <textarea id="node-input-preProcessing" placeholder="Pre-Processing Commands" maxlength="2000" rows="5"></textarea>
    </div>

    <!-- Menu Type Selection -->
    <div class="form-row">
        <label for="node-input-menuType">Menu Type</label>
        <select id="node-input-menuType">
            <option value="INPUT">INPUT</option>
            <option value="NOTICE">NOTICE</option>
            <option value="REDIRECT">REDIRECT</option>
        </select>
    </div>

    <!-- Additional fields shown conditionally -->
    <div class="form-row" id="node-input-inputType-row">
        <label for="node-input-inputType">Input Type</label>
        <select id="node-input-inputType">
            <option value="ALL">ALL</option>
            <option value="INTEGER">INTEGER</option>
        </select>
    </div>
    <div class="form-row" id="node-input-minLength-row">
        <label for="node-input-minLength">Min Length</label>
        <input type="number" id="node-input-minLength" placeholder="Minimum Length">
    </div>
    <div class="form-row" id="node-input-maxLength-row">
        <label for="node-input-maxLength">Max Length</label>
        <input type="number" id="node-input-maxLength" placeholder="Maximum Length">
    </div>
    <div class="form-row" id="node-input-minDigit-row">
        <label for="node-input-minDigit">Min Digit</label>
        <input type="number" id="node-input-minDigit" placeholder="Minimum Digit">
    </div>
    <div class="form-row" id="node-input-maxDigit-row">
        <label for="node-input-maxDigit">Max Digit</label>
        <input type="number" id="node-input-maxDigit" placeholder="Maximum Digit">
    </div>
</script>

```

The above seems sound, but it doesn't change my node's icon.

Any advice?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 November 2024 07:07 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053/2 "2024-11-11T07:07:10Z")

</div>

> [@DrT7007](#):
>
> `switch (menuType) {`

this will likely be causing an error in the browsers console. Try using the val() of the element instead

---

<div class="post-metadata">

**Author:** ![DrT7007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drt7007/32/96303_2.png) [@DrT7007](https://discourse.nodered.org/u/DrT7007)\
**Post date:** [11 November 2024 09:02 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053/3 "2024-11-11T09:02:44Z")

</div>

Thank you @Steve-Mcl

Got it working.

```auto
        icon: function() {
            switch (this.menuType) {
                case "NOTICE":
                    return 'node-red/comment.svg';
                case "INPUT":
                    return 'node-red/file-in.svg';
                case "REDIRECT":
                    return 'node-red/link-return.svg';
                default:
                    return 'node-red/fa-wrench.svg';
            }

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f9a32b8dc259a836eca2e3da96e6a2b231999ea.png)

Interesting observation. Node-red icons work, but the 'fa-...' icons doesn't.  
#Curious

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 November 2024 13:47 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053/4 "2024-11-11T13:47:33Z")

</div>

You can always have a `resources` folder in your package, this is automatically served up to the Editor by Node-RED and you can include your own svg files there. The font-awesome icons can all be downloaded as svg files.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 January 2025 13:47 UTC](https://discourse.nodered.org/t/changing-the-icon-based-on-an-attribute-value/93053/5 "2025-01-10T13:47:49Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.