Custom icons for my add-on doesn't work!

Question

I am making custom icons for my Blender add-on. I read the bpy.utils.previews.ImagePreviewCollection already. I tried code and set the __file__ to bpy.context.space_data.text.filepath it works very well.

But, when I add the codes to my add-on file, it doesn't show the icon. Here is the code:

#Add-on info
bl_info = {
    "name": "Shader",
    "author": "me",
    "version": (1, 0),
    "blender": (2, 92, 0),
    "location": "View3D > Toolbar > Shader",
    "description": "Add shaders to your object",
    "category": "3D View",
}



import os
import bpy
from bpy.types import Operator
from bpy.props import StringProperty, IntProperty
from bpy.types import Panel



# Main panel for adding colour to object
class ShaderPanel(bpy.types.Panel):
    bl_label = "Shader"
    bl_idname = "ShaderPanel"
    bl_space_type = 'VIEW_3D'
    bl_region_type = 'UI'
    bl_category = 'Shader'
    
        
    def draw(self, context):
        layout = self.layout
        pcoll = preview_collections["main"]
        row = layout.row()
        my_icon = pcoll["my_icon"]
        your_icon = pcoll["your_icon"]
        
        row.operator("render.render", icon_value=your_icon.icon_id)
        row.operator("render.render", icon_value=my_icon.icon_id)
        
        

classes = [ShaderPanel]

preview_collections = {}


def register():
    from bpy.types import WindowManager
    from bpy.props import (
        StringProperty,
        EnumProperty,
    )
    
    ############ Custom Icons ############
    import bpy.utils.previews
    pcoll = bpy.utils.previews.new()

    # path to the folder where the icon is
    # the path is calculated relative to this py file inside the addon folder
    my_icons_dir = os.path.join(os.path.dirname(__file__), "icons")

    # load a preview thumbnail of a file and store in the previews collection
    pcoll.load("my_icon", os.path.join(my_icons_dir, "icon.png"), 'IMAGE')
    pcoll.load("your_icon", os.path.join(my_icons_dir, "icon1.png"), 'IMAGE')

    preview_collections["main"] = pcoll
    #######################################

    
    for cls in classes:
        bpy.utils.register_class(cls)

def unregister():
    
    for pcoll in preview_collections.values():
        bpy.utils.previews.remove(pcoll)
    preview_collections.clear()

    for cls in classes:
        bpy.utils.unregister_class(cls)
        
        
if __name__ == "__main__":
    __file__ = bpy.context.space_data.text.filepath
    register()

I did not get error, but it doesn't show icon. Here is what I got:

Here is the folders and files/images location:

Please help me, I already read many common questions but that doesn't solve my problem.

Answer 1

Your path to resources is wrong:

my_icons_dir = os.path.join(os.path.dirname(__file__), "icons")

See template ui_previews_custom_icon.py:

IMPORTANT NOTE: You need to replace the image path with a real existing one. For distributable scripts, it is recommended to place the icons inside the addon folder and access it relative to the py script file for portability

For this we can use bpy.utils.user_resource(resource_type, path='', create=False) link

Script:

#Add-on info
bl_info = {
    "name": "Shader",
    "author": "me",
    "version": (1, 0),
    "blender": (2, 92, 0),
    "location": "View3D > Toolbar > Shader",
    "description": "Add shaders to your object",
    "category": "3D View",
}

import os
import bpy
from bpy.types import Operator
from bpy.props import StringProperty, IntProperty
from bpy.types import Panel

# Main panel for adding colour to object
class SHADER_PT_PANEL(bpy.types.Panel):
    bl_label = "Shader"
    bl_idname = "SHADER_PT_PANEL"
    bl_space_type = 'VIEW_3D'
    bl_region_type = 'UI'
    bl_category = 'Shader'
    
    def draw(self, context):
        layout = self.layout
        pcoll = preview_collections["main"]
        row = layout.row()
        my_icon = pcoll["my_icon"]
        your_icon = pcoll["your_icon"]
        
        row.operator("render.render", icon_value=your_icon.icon_id)
        row.operator("render.render", icon_value=my_icon.icon_id)
        

classes = [SHADER_PT_PANEL]
preview_collections = {}


def register():
    from bpy.types import WindowManager
    from bpy.props import (
        StringProperty,
        EnumProperty,
    )
    
    ############ Custom Icons ############
    import bpy.utils.previews
    pcoll = bpy.utils.previews.new()

    # path to the folder where the icon is
    # the path is calculated relative to this py file inside the addon folder
###    my_icons_dir = os.path.join(os.path.dirname(__file__), "icons")

    # this path is for installed addons in user_resources ; doesn´t work as script , for script you need a path to your resources
    my_icons_dir = bpy.utils.user_resource('SCRIPTS', path='addons\Shader' , create=False)   # assuming addon folder is called 'Shader'

    # load a preview thumbnail of a file and store in the previews collection
    pcoll.load("my_icon", os.path.join(my_icons_dir, "icon.png"), 'IMAGE')              # assuming '*.png' is inside folder 'Shader'
    pcoll.load("your_icon", os.path.join(my_icons_dir, "icon1.png"), 'IMAGE')

    preview_collections["main"] = pcoll
    #######################################

    for cls in classes:
        bpy.utils.register_class(cls)

def unregister():
    
    for pcoll in preview_collections.values():
        bpy.utils.previews.remove(pcoll)
    preview_collections.clear()

    for cls in classes:
        bpy.utils.unregister_class(cls)
        
if __name__ == "__main__":
    __file__ = bpy.context.space_data.text.filepath
    register()