Change icons in the icon set

Change icons in the icon set

Posted by: pedro.moraes on 19 March 2024, 3:44 am EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 March 2024, 3:44 am EST - Updated 19 March 2024, 3:49 am EST

  Hello,

  I need to change and add icons from the icon set, is there any way?

  

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 20 March 2024, 12:13 am EST

  Hi,

  We are still investigating this at our end. We will let you know about our findings as soon as possible.

  Regards,
  
  Priyam

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 20 March 2024, 10:38 pm EST - Updated 20 March 2024, 10:44 pm EST

  Hi,

  If you wish to replace existing icons with custom ones, you can accomplish this by overriding the “getIcon” method. For instance, if you want to replace the three arrow colored icons, follow the steps outlined below:

  1. You can change icon image in Icon sets dropdown by providing background image in css file. Refer below snippet and image.

  

  .gc-icon-set-type-preview .three-arrows-colored,
  .gc-iconsettype-combo-editor-popup .three-arrows-colored,
  .gc-sjsdeisnger-popup .three-arrows-colored {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAUklEQVR4nO2UQQrAMAgE53n5/xOSh2wg1OK53VAaHBD0suNFoSgcNGAAMle/slfjDleS3IMbRW4WZPs/BRwp0MMFvhO4UORuP7S2SdLjVRQFr5jFl5GofLDHiQAAAABJRU5ErkJggg==);
    background-size: 70% 100%;
  }

  2. Then override “getIcon” method to provide icons according to icon index. Refer attached snippet.

  const base = GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon;
  GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon = function(
    iconSetType,
    iconIndex
  ) {
      console.log(arguments)
      const result = base.apply(this, arguments);
  
      if(iconSetType == GC.Spread.Sheets.ConditionalFormatting.IconSetType.threeArrowsColored){
          if(iconIndex == 0){
              return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA60lEQVR4nN2VQQ6CMBBFX0w8jysv4F7ccAbPwUa8h3ICvIYbN2LYeQKjuG5Nk5qQgHQG1ER/MoGknf/pHzoD/44xEAMZUAB3oPLvmV9ze3phAZSADUTp94oxAtYCYlsLA6Q+Nwgtua1FKrHFDBAwQPSKfCzw/AysgH2gJq2FjzuScmBW8zgPfIjjaiDrSJgDE2AqFNi2CZw6Ei7+mQgFHFcDlaCIiVDAcTVwe6PAVWuRVQoU2iJbpcBG+5tapUDc96LtgCVw6HPRPt4qvtLs8O0gVZ7EaNr1E5Fi4ARtkY7MysfR95tBI/M38ACMZiMNUFA0cQAAAABJRU5ErkJggg=="
          }else if(iconIndex == 1){
              return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABKElEQVR4nN2VsWoCQRCGP4I+RxqLVKYIIXkJTXOVlTZ5kcj5AmlS2OhVPkoeIBHBwiqFCQHPLngXFv7Awd3u7SoK8Ycf9rh/Z3ZnZmfg3NEEIiAB3oEtkGqd6J/R7IUHYAHkNVxI640LYORhOC8wA2LtrUWo8bzA2Ccs2QEOMqBrM950xPwHeAF6YlKTk8rER45NA2nawKXWTw69sVWC7VRLJe9OIfjSCa8cDqZVDuYW8QcwA171bRw0gHuHA2OrhNQzkX3pxw6NsVXCxsP4UNoOsHPoNiEhysVn6W49blsZIlfpJUr0NfDpcdNJSJmulVSDFnBT4FtImdoe2jfwaOEq5KEdvVWcpNmhZMaBN8lC2vUfugEDpzYsviMzFU31mH5z0Mj8H/gFb3kXrntum/cAAAAASUVORK5CYII=";        
          }else if(iconIndex == 2){
              return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAUlEQVR4nO2UOwrCQBCGv954OEVEBU+gptXYiZ7D0traF1h4Ao/gI9pZGkEjgRGCZHSzEUFwYMlj/50vM3924R+/GHnABebAHrjINXpuAU5WQAU4AuGLcQDKtoAucHsDCGVEOs+mAlNAGAOV03igtegCbIGrMu+beuQqCVbypQOgCKwVXdMEMlcW96SS6H4jyZJ0UxPI3qD/Q2CkzO1MIMGL5AugDtTEmyTN+VOVnMQf60pmyuJ27LeOvCkouokJpKUsHkub+kAVWCq6hgnEkaMiKUEg7ci8T5B+2+z4EinDS3l2ddIC4hX5bwC+TQXP4YiZU/Hj4ctE3ueyAv7x/bgD9l3WaQPanuIAAAAASUVORK5CYII=";
          }
      }
      return result;
  };

  I have attached a sample to refer.

  Sample: https://jscodemine.mescius.io/share/LXpATh_XeEasR692SBZ9xg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fstyle.css"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  And If you prefer to add custom icons without replacing the built-in ones, then let us know.

  References:

  getIcon: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.IconSetRule#geticon

  Regards,
  
  Priyam