Change file browser icons within a particular extension

I want to change the folder and file icons within a particular extension.

I tried doing the following

var doc = app.docRegistry
var itFileTypes = doc.fileTypes()
var fileIcon = itFileTypes.next()
while (fileIcon != undefined) {
  fileIcon = itFileTypes.next()
  switch (fileIcon.name){
    case 'directory':
      var Icon = fileIcon.icon as LabIcon
      Icon.svgstr = DATABASE_SVG
      break
    case 'html':
      var Icon = fileIcon.icon as LabIcon
      Icon.svgstr = SPREADSHEET_SVG
      break
  }
}

source: https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/4

It worked also. But the problem is that it changes the icons of all other extensions too (including the ones of the default file browser). How can I restrict the icon changes to my extension?

You can add your own file extension, e.g. .custom.html, with its own mimetype, etc. and then pick your own icon.

Both otherwise: the intent is that a directory icon is a directory icon everywhere throughout the UI.