How to edit the HTML and CSS for the Filter Navigator icon?

[dauger]

Hello all!

I am having a hard time finding where the Filter Navigator's icon can be edited. The HTML from my browser's console shows the following...

<label class="input-group-addon-transparent icon-filter" aria-hidden="true" for="filter" ng-hide="isCollapsed"></label>

And when I say the Filter Navigator icon, I mean the below icon.

Any help would be appreciated, thanks!

[Tanushree Maiti]

Hi @dauger ,

Is this a customer requirement? If so, could you please share the business justification for this change?

ServiceNow has intentionally designed filtering across the platform using the funnel icon, as users commonly associate the funnel symbol with filtering functionality. This approach helps maintain consistency and provides a familiar user experience throughout the platform.

If this change is being considered primarily for learning or experimentation purposes, I would recommend selecting a different topic that does not involve modifying an out-of-the-box (OOB) ServiceNow feature.

[dauger]

Sorry for the delay, I was away for the past week.

We are attempting to meet accessibility standards as put forth by the ADA, and part of our internal audit flagged the following as not meeting that standard.

<label
    ng-hide="isCollapsed"
    for="filter"
    aria-hidden="true"
    class="input-group-addon-transparent icon-filter">

Which came from this URL: Form Unique Label Violation 

It seems that the simple answer would be to remove the 'for' attribute, but I am not sure how to do that.

[Ankur Bawiskar]

@dauger 

I don't think any direct way is available to change the color etc for that funnel icon

I will recommend not doing this as this is anyways old UI and many customers are moving towards new UI

but you can use UI script and change that

Something like this

addLoadEvent(changeColor);

function changeColor() {
   
    setTimeout(function() {
        var label = document.querySelector('.input-group-addon-transparent.icon-filter');
        if (label) {
            label.style.color = 'orange';
        }
    }, 1000);

}

See if that works

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[dauger]

Hello! Thank you for the response and sorry for the delay.

I am looking to having the code within the icon adhere to ADA standards, as we are attempting to update a number of our pages to meet those standards.

I responded to @Tanushree Maiti and that post has more of the details.