Treeview

jqTree plugin is used in this demo. To use it you should include jqtree/jqtree.css before ace.css.
There are some customizations done in scss/plugins/treeview.scss

For custom icons and some other options you can use something like this:

var data = [
 {
    id: 1,
    name: 'Cloud Files',
    icons: {
      'default': ['<i class="fas fa-cloud"></i>', 'text-blue-m1']
    },
    children: [
     {
        id: 2,
        name: 'Folder 1',
        icons: {
            'default': ['<i class="fa fa-folder"></i>', 'text-orange-d1'],
            'open': ['<i class="fa fa-folder-open"></i>', 'text-orange-d1']
        }
     }
    ]
 }
]

Then you can add icons to each tree element in onCreateLi function:

onCreateLi: function(node, $li) {
    $li.find('.jqtree-element').addClass('bgc-h-warning-l3');

    // insert the icons
    if(node.icons) {
        var $title = $li.find('.jqtree-title');

        var iconDefault = null
        // prepend the `default` icon
        if(node.icons.default) {
            iconDefault = $( node.icons.default[0] ).addClass( node.icons.default[1] ).addClass('node-icon');
            $title.prepend( iconDefault );
        }

        // prepend the `open` icon
        if(node.icons.open) {
            if(iconDefault) iconDefault.addClass('closed-icon');
            $title.prepend(
                $( node.icons.open[0] ).addClass( node.icons.open[1] ).addClass('opened-icon').addClass('node-icon')
            );
        }
    }
}

Adding .tree-dotted class to the .jqtree element will add a dot before tree items:
Tree Dots

If you want checkboxes like the "Choose Categories" tree in demo, you can toggle icons in tree.click event:

var selectedIcon =
'<span class="selected-icon d-inline-block text-center border-1 bgc-warning px-1px mx-1 text-70 pb-1px radius-2px">\
    <i class="w-2 fa fa-check text-white"></i>\
</span>';

var deselectedIcon = 
'<span class="deselected-icon d-inline-block text-center border-1 bgc-white brc-secondary-m3 px-1px mx-1 text-70 pb-1px radius-2px">\
    <i class="w-2 fa fa-times text-orange-l4"></i>\
</span>';

var categoryTree = $('#id-jqtree-categories');
categoryTree.tree({
  data: categoryData,

  closedIcon : $('<i class="bgc-white w-2 far fa-plus-square text-grey-l1 text-110"></i>'),
  openedIcon : $('<i class="bgc-white w-2 far fa-minus-square text-default-d2 text-110"></i>'),

  onCreateLi: function(node, $li, is_selected) {
      // insert the icon
      var title = $li.find('.jqtree-title');
      if(node.children.length == 0) {
        title.addClass('text-grey-d2 text-95');
        if( is_selected ) {
            $(selectedIcon).insertBefore(title);
        }
        else {
            $(deselectedIcon).insertBefore(title);
        }
      }
      else {
        title.addClass('text-secondary-d3 font-italic');
      }
      $li.find('.jqtree-element').addClass('bgc-h-warning-l3 radius-1');
  }
});

categoryTree.on('tree.click', function(e) {
  // Disable single selection
  e.preventDefault();

  var selectedNode = e.node;
  if (selectedNode.id === undefined || selectedNode.children.length > 0) {
    return;
  }

  if (categoryTree.tree('isNodeSelected', selectedNode)) {
    //if already selected, deselect it
    categoryTree.tree('removeFromSelection', selectedNode);

    //insert deselectedIcon and remove .selected-icon
    var icon = $(selectedNode.element).find('.selected-icon');
    $(deselectedIcon).insertAfter(icon);
    icon.remove();
  }    
  else {
    categoryTree.tree('addToSelection', selectedNode);

    //insert selectedIcon and remove .deselected-icon
    var icon = $(selectedNode.element).find('.deselected-icon')
    $(selectedIcon).insertAfter(icon)
    icon.remove()
  }
});

Please see views/pages/treeview/@page-script.js for more details