From f05946de1c7236f0297a2331ecb44514c3dde4b8 Mon Sep 17 00:00:00 2001 From: Ben Szymanski Date: Fri, 26 Sep 2025 10:58:50 +0200 Subject: [PATCH 1/3] Revised icons documentation for clarity, updated examples, and removed outdated content. --- .../extension-types/icons.md | 52 ++++++++----------- 1 file changed, 21 insertions(+), 31 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md index d57653437e2..e7f5d1ca917 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md @@ -1,44 +1,37 @@ --- -description: Learn how to append and use Icons. +description: Create custom icon sets for use across the Umbraco backoffice. --- # Icons -This article describes how to add and use more icons in your UI. - -{% hint style="warning" %} -This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice. -{% endhint %} +Umbraco extension authors can create custom icon sets for use across the Umbraco backoffice using an extension type called `icons`. ## Register a new set of icons -New icons can be added via an extension type called `icons`. - -You must add a new manifest to the Extension API to register icons. The manifest can be added through the `umbraco-package.json` file as shown in the snippet below. +Icons must be registered in a manifest using the Extension API. The manifest can be added through the `umbraco-package.json` file, as shown below. {% code title="umbraco-package.json" %} - ```json { - "name": "MyPackage", - "extensions": [ - { - "type": "icons", - "alias": "MyPackage.Icons.Unicorn", - "name": "MyPackage Unicorn Icons", - "js": "/App_Plugins/MyPackage/Icons/icons.js" - } - ] + "$schema": "../../umbraco-package-schema.json", + "name": "My Package", + "version": "0.1.0", + "extensions": [ + { + "type": "icons", + "alias": "MyPackage.Icons.Unicorn", + "name": "MyPackage Unicorn Icons", + "js": "/App_Plugins/MyPackage/Icons/icons.js" + } + ] } ``` - {% endcode %} -The file set in the `js` field holds the details about your Icons. The file should resemble the following: +The file set in the `js` field contains the details of your icons. These definitions should resemble the following: {% code title="icons.js" %} - -```typescript +```javascript export default [ { name: "myPackage-unicorn", @@ -50,26 +43,23 @@ export default [ } ] ``` - {% endcode %} -The icon name needs to be prefixed to avoid collision with other icons. +Prefix each icon name to avoid collisions with other icons. -Each icon must define a path, either as a string or a dynamic import as shown above. This file must be a JavaScript file containing a default export of an SVG string. See an example of this in the code snippet below. +Each icon must define a path, either as a string or a dynamic import as shown above. This file must be a JavaScript file containing a default export of an SVG string. See an example below: {% code title="icon-unicorn.js" %} - -```typescript +```javascript export default ``; ``` - {% endcode %} ### Using Icons in your UI -The `umb-icon` element is automatically able to consume any registered icon. +The `umb-icon` element can automatically consume any registered icon. -The following example shows how to make a button using the above-registered icon. +The following example demonstrates how to create a button using the registered icon. ```html From 71881e6f08c237e2a2b038228f8254e9feb0aa0c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 26 Sep 2025 11:30:46 +0200 Subject: [PATCH 2/3] align prefix --- .../extending-overview/extension-types/icons.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md index e7f5d1ca917..7376e13f9d5 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md @@ -19,8 +19,8 @@ Icons must be registered in a manifest using the Extension API. The manifest can "extensions": [ { "type": "icons", - "alias": "MyPackage.Icons.Unicorn", - "name": "MyPackage Unicorn Icons", + "alias": "My.Icons.Unicorn", + "name": "My Unicorn Icons", "js": "/App_Plugins/MyPackage/Icons/icons.js" } ] @@ -34,11 +34,11 @@ The file set in the `js` field contains the details of your icons. These definit ```javascript export default [ { - name: "myPackage-unicorn", + name: "my-unicorn", path: () => import("./icon-unicorn.js"), }, { - name: "myPackage-giraffe", + name: "my-giraffe", path: () => import("./icon-giraffe.js"), } ] @@ -63,6 +63,6 @@ The following example demonstrates how to create a button using the registered i ```html - + ``` From 216a93de233b10cf233accac0424fdee8912fbb2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 26 Sep 2025 11:34:11 +0200 Subject: [PATCH 3/3] Simplify example Simplified the example to show only the usage of the registered icon with the `umb-icon` element, removing the button wrapper for clarity. --- .../customizing/extending-overview/extension-types/icons.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md index 7376e13f9d5..d9b56b4a5d8 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md @@ -59,10 +59,6 @@ export default ``; The `umb-icon` element can automatically consume any registered icon. -The following example demonstrates how to create a button using the registered icon. - ```html - - - + ```