I have a package I'm trying to prepare for Umbraco 14 but a little lost on how I would transition from the C# api for this notification to whatever frontend management API exists to hook into a rendering event.

Depending on what you're wanting to achieve, you can observe the tree items by consuming UMB_TREE_CONTEXT. Have a look in src/packages/core/tree/default/default-tree.element.ts for an example of consuming and observing context values.

Thank you @nathanwoulfe I understand a little bit more now. Looks like I'm trying to influence the icon too late in the game! https://cdn.discordapp.com/attachments/1245882103543894187/1245918865276276808/image.png?ex=665a7fdd&is=66592e5d&hm=b83a49aa001aef335ba8adf8cd63025592e9d886e5a90a1f7f3c4ac733be4aed&

Feels like something that should be possible though, and if not, probably should be made so

I'll return to this tomorrow but thanks for sharing that info about observables, it didn't ding until your comment. I'm so far behind man. I feel way out of touch with this new code base.

There's a learning curve for sure, but when it starts to click, it's a big aha moment

Yep–no matter what I observe and what I do poking and prodding around I cannot override the icon. These props are always read only!

I faced a similar problem and didn't find any relevant documentation so I asked support, here's their answer: --- Override rendering of nodes in the tree: In Umbraco v14 you can register a custom tree item and control the rendering of the element. The manifest looks like this:

const treeItem: ManifestTreeItem = {
type: 'treeItem',
alias: 'My.TreeItem.NameOfEntity',
name: 'Name Of Entity Tree Item',
element: () => import('./my-tree-item.element.js'),
api: () => import('./my-tree-item.context.js'),
forEntityTypes: ['my-entity-type'],
};

In the core we register a custom tree item for the Document (Content) tree, where we show a label based on the current variant, custom icons etc. I think this is the best place for inspiration at the moment:https://github.com/umbraco/Umbraco.CMS.Backoffice/tree/main/src/packages/documents/documents/tree/tree-item

@Kenneth Solberg thanks! This is eventually where I landed (as a test). I'm going to implement a client side cache to hold uniqueIDsuniqueIcons and update it further. I appreciate you and @User 's help on this. Still not a fan of the approach but it allows me to release a package update more quickly.

import { html, nothing, classMap } from "@umbraco-cms/backoffice/external/lit";

// Wait for the original class to be defined
customElements.whenDefined("umb-document-tree-item").then(() => {

    // Get a reference to the original class
    const originalClass = customElements.get("umb-document-tree-item");

    // Patch the renderIconContainer method on the prototype
    const originalRenderIconContainer = originalClass.prototype.renderIconContainer;

    // Private properties
    function getPrivateField(instance, fieldName) {
        const privateField = Object.getOwnPropertySymbols(instance).find(symbol =>
            symbol.toString().includes(fieldName)
        );
        return instance[privateField];
    }
    
    originalClass.prototype.renderIconContainer = function() {
        const isDraft = getPrivateField(this, "#isDraft");
        const icon = "icon-t-shirt";

        return html`
            <span id="icon-container" slot="icon" class=${classMap({ draft: isDraft})}>
                ${this.item?.documentType.icon
                    ? html`<umb-icon id="icon" slot="icon" name="${icon}"></umb-icon>`
                    : nothing}
            </span>
        `;
    };
});

Not sure how I can help specifically Mark ?!

Oh sorry I mentioned you instead of Nathan. HAHA But you rock too!

Did think so 😂

@Mark Drake how do you wire up that script block? is it in the manifests element: () => import?