Comments on: Adding Icons to UI Action Buttons in ServiceNow

By: Mike

Mike — Mon, 31 Oct 2022 18:17:56 +0000

To anyone finding this post after the “Next experience” upgrade You will need to add elmt.style.width = ‘auto’;
elmt.style.padding = ‘0px 10px’;
elmt.style.border = ‘1px black’;
elmt.style.alignItems = ‘center’;
for everything to work correctly otherwise buttons get mashed up and have weird spacing.

By: Jerimy Mahoney

Jerimy Mahoney — Thu, 22 Aug 2019 20:08:13 +0000

In reply to Brian.

Thanks! I’ve updated the article. You can also view the icons within an instance by navigating to: https://your_instance.service-now.com/styles/retina_icons/retina_icons.html

By: Brian

Brian — Fri, 18 Jan 2019 15:46:42 +0000

Hmm, the style guide link doesn’t work anymore.

By: Mila Morales

Mila Morales — Wed, 30 Aug 2017 16:52:55 +0000

In reply to Alexander.

ServiceNow has published a style guide that you can reference to view all of the icons (and corresponding names to reference them by).
You can view the style guide here: https://styleguide.service-now.com/styles/styleguide/guidelines_-_icons.html

By: Alexander

Alexander — Tue, 29 Aug 2017 12:55:14 +0000

Where can i find the list of available icons by name in SNow? :)

By: Sebastien

Sebastien — Thu, 13 Jul 2017 08:18:34 +0000

In reply to Sebastien.

Solution found on the SNC community :
https://community.servicenow.com/thread/224200

Add the following scoped system property for your apps

Name: glide.script.block.client.globals
Type: true/false
Value: false

By: Sebastien

Sebastien — Wed, 12 Jul 2017 13:03:42 +0000

In reply to Sebastien. the original error message is "TypeError: $$ is not a function" => "Error Button color:" goes from my client script try catch function ;-)

By: Sebastien

Sebastien — Wed, 12 Jul 2017 12:56:11 +0000

Hi Mark,

With Scoped application created with Studio (Istanbul Patch3-hotfix0a), the color did not apply on UI Action => we got a error into the Chrome console “Error Button color : TypeError: $$ is not a function”.

Is there a workaround with that issue ?

By: Mark Stanger

Mark Stanger — Wed, 10 May 2017 01:38:31 +0000

In reply to William Smith. One way to get at any of the colors you can already see in the system is to install a free browser color picker plugin. For the specific example in the screenshot I've updated the script above so that you can see.

By: William Smith

William Smith — Tue, 09 May 2017 15:40:43 +0000

How can I get the button background color to use the Bootstrap color theme, like you have in your examples?