How can I add more icons to the glyph library

[Annmol Perayil]

Hi there

I want to add company specific icons into the glyph list in ServiceNow. How can I do this please? 

[kashyap5 · Accepted solution]

Step1: You have to upload the image to image to the table "db_image"
Step2: Clone the widget Icon Link
Step3: Use the below Html code and Server Side code

HTML:

<div>
  <!--// Top Icon -->
  <a ng-if="::(options.link_template == 'Glyph Icon' || !options.link_template)" ng-href="{{::data.href}}" class="glyph_icon {{::options.class_name}}" target="{{::data.target}}">
      <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}" align="center" style="margin-right: auto; margin-left: auto; display: block;"></div>
      <h4 style="text-align: center;">{{::options.title}}</h4>
      <span class="text-muted">{{::options.short_description}}</span>
      <p>  </p>

 </a>

  <!--// Image Icon -->
  <a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
      <div><img   src="{{data.image}}" alt="" align="center" style="margin-right: auto; margin-left: auto; display: block;"/>
          <h4 style="text-align: center;">{{::options.title}}</h4>
      <span class="text-muted">{{::options.short_description}}</span></div>
      <p>  </p>
  </a>

Server Script:

(function(){

var gr = $sp.getInstanceRecord();

data.href = $sp.getMenuHREF(gr);

data.target = options.target || ""; 

var img = new GlideRecord('db_image');

img.addQuery('sys_id', options.image);

img.query()

if (img.next()){

  data.image = img.getValue('name')

}

})();

Please mark as Correct Answer/Helpful, if applicable.
Thanks!
Kashyap

[Annmol Perayil]

That helped Kashyap.. I got them all set up... may be worth adding to this the below three points to complete the set up

1. Under Widget options, link_template, add an additional choice 'Image Icon'

2. Create an additional widget option to gather the sys id of the image as a string

3. Open the instance options of the widget, remove selected glyph, select Image Icon as choice for link_template and input the sys_id of the image you wish to add in the image option

[shaik_irfan]

@Annmol Perayil 

I am having difficulties in adding custom glyph icons. Can you please help me out

https://community.servicenow.com/community?id=community_question&sys_id=5a4e1169dbd7dcd0fb115583ca96195a

[kashyap5]

Thanks Annmol for adding more information.