Change folder icon with custom icon elfinder jquery

Question

I have 3 folders in my root directory and i want to change icons for each folder on the root. I tried using tmbPath and tmbURL but it is not replacing the icon.

Here is code :

 $options = array(
        'roots' => [
    
            [
                'driver' => 'Folder 1',
                'alias' => 'test',
                'filesystem' => $filesystem,
                'URL' => $url_to_folder,
                'tmbPath'=> '/images',
                'tmbURL' => site_url().'/images',
            ],
            [
                'driver' => 'Folder 2',
                'alias' => 'test-',
                'filesystem' => $filesystem2,
                'URL' => $url_to_folder2,
                'tmbPath'=> '/images',
                'tmbURL' => site_url().'/images',
            ],
            [
                'driver' => 'Folder 3',
                'alias' => 'testing',
                'filesystem' => $filesystem3,
                'URL' => $url_to_folder3,
                'tmbPath'=> '/images',
                'tmbURL' => site_url().'/images',
            ]
    
        ]
    );

I did R&D for this but nothing works for me.Can anyone help me where i am wrong. It will be great help for me. Thanks in Advance.

Answer 1

Finally I found a fix to make it working and posting here in case anybody faces same situation. I added a identifier all the folders in the title and using css I changes the image. Here is the code:

 $options = array(
    'roots' => [

        [
            'driver' => 'Folder 1_root1',
            'alias' => 'test',
            'filesystem' => $filesystem,
            'URL' => $url_to_folder,
            'tmbPath'=> '/images',
            'tmbURL' => site_url().'/images',
        ],
        [
            'driver' => 'Folder 2_root2',
            'alias' => 'test-',
            'filesystem' => $filesystem2,
            'URL' => $url_to_folder2,
            'tmbPath'=> '/images',
            'tmbURL' => site_url().'/images',
        ],
        [
            'driver' => 'Folder 3_root3',
            'alias' => 'testing',
            'filesystem' => $filesystem3,
            'URL' => $url_to_folder3,
            'tmbPath'=> '/images',
            'tmbURL' => site_url().'/images',
        ]

    ]
);

And used css as follow:

.elfinder-navbar-root[title*="_root1"] .elfinder-navbar-icon {
    background-image: url(../images/root1.png) !important;
    background: url(../images/root1.png) 0 0 no-repeat !important;
    background-size: contain !important;
}

.elfinder-navbar-root[title*="_root2"] .elfinder-navbar-icon {
    background-image: url(../images/root2.png) !important;
    background: url(../images/root2.png) 0 0 no-repeat !important;
    background-size: contain !important;
}

.elfinder-navbar-root[title*="_root3"] .elfinder-navbar-icon {
    background-image: url(../images/root3.png) !important;
    background: url(../images/root3.png) 0 0 no-repeat !important;
    background-size: contain !important;
}

This trick fulfilled my requirement.