Add detailed info regarding icon use (#454)

Co-authored-by: Swen Brüseke <[email protected]>
Co-authored-by: dahn <[email protected]>

Author: 3 people

source/adminguide/ui.rst

@@ -480,19 +480,26 @@ Example for adding custom plugins:
       plugins: [
          {
             "name": "ExamplePlugin",
-            "icon": "appstore",
+            "icon": "appstore-outlined",
             "path": "example.html"
          },
          {
             "name": "ExamplePlugin1",
-            "icon": "appstore",
+            "icon": "appstore-outlined",
             "path": "https://cloudstack.apache.org/"
          }
       ]
       ...
    }
 
-`icon` for the plugin can be chosen from Ant Design icons listed at `Icon - Ant Design Vue <https://www.antdv.com/components/icon/>`_.
+`icon` for the plugin can be chosen from Ant Design icons listed at `https://3x.antdv.com/components/icon <https://3x.antdv.com/components/icon>`_.
+
+.. warning::
+   Not all ant icons are supported at the moment. You will find a list of supported icons 
+   within the github repository in ui/src/core/lazy_lib/icons_use.js. To use an icon you 
+   need to transform the listed name. For example "PieChartOutlined" needs to be transformed 
+   to "pie-chart-outlined", "ReadOutlined" needs to be tranformed to "read-outlined".
+
 For displaying a custom HTML in the plugin, HTML file can be stored in the CloudStack management server's web application directory on the server, i.e., */usr/share/cloudstack-management/webapp* and `path` can be set to the name of the file. For displaying a service or a web page, URL can be set as the `path` of the plugin.
 
 |ui-custom-plugin.png|