Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/icons below:

Icons | Umbraco CMS

1. Customizing Backoffice
2. Extensions Overview
3. Extension Types

Learn how to append and use Icons.

This article describes how to add and use more icons in your UI.

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.

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.

{
  "name": "MyPackage",
  "extensions": [
    {
      "type": "icons",
      "alias": "MyPackage.Icons.Unicorn",
      "name": "MyPackage Unicorn Icons",
      "js": "/App_Plugins/MyPackage/Icons/icons.js"
    }
  ]
}

The file set in the js field holds the details about your Icons. The file should resemble the following:

export default [
    {
        name: "myPackage-unicorn",
        path: () => import("./icon-unicorn.js"),
    },
    {
        name: "myPackage-giraffe",
        path: () => import("./icon-giraffe.js"),
    }
]

The icon name needs to be prefixed to avoid collision 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.

export default `<svg ...></svg>`;

The umb-icon element is automatically able to consume any registered icon.

The following example shows how to make a button using the above-registered icon.

<uui-button compact label="Make the unicorn dance">
    <umb-icon name="myPackage-unicorn"></umb-icon>
</uui-button>

Last updated 4 months ago

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4