Umbraco Icons

Reference Example

The Umbraco source includes a working example:

Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/

This example demonstrates how to register and use custom SVG icons. Study this for production patterns.

Workflow

1. Fetch docs - Use WebFetch on the URLs above
2. Ask questions - What icons needed? SVG source available?
3. Generate files - Create manifest + icon files based on latest docs
4. Explain - Show what was created and how to use the icons

Minimal Examples

Manifest (umbraco-package.json)

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

Icons Registry (icons.ts)

export default [
  {
    name: 'my-custom-icon',
    path: () => import('./icons/my-custom-icon.js'),
  },
  {
    name: 'my-other-icon',
    path: () => import('./icons/my-other-icon.js'),
  },
];

Icon File (icons/my-custom-icon.ts)

export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>`;

Using Custom Icons

// In any extension manifest
const manifest = {
  type: 'headerApp',
  kind: 'button',
  alias: 'My.HeaderApp',
  name: 'My App',
  meta: {
    label: 'My App',
    icon: 'my-custom-icon',  // Use your custom icon
  },
};

In HTML Templates

<umb-icon name="my-custom-icon"></umb-icon>

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.