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.
The file set in the js field holds the details about your Icons. The file should resemble the following:
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.
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.