Is it possible to add a icon to a workspaceaction through the manifestfile

[jbppraxis (Bjarke)]

Does anyone know if its possible to add a icon to a workspaceaction.

I have the following manifest i would expext it was possible to add a icon to the metadata but that does not work.

{
		type: 'workspaceAction',
		kind: 'default',
		name: 'Previous page',
		alias: 'local.previousPage.action',
	weight: 103,
	api: () => import('./previous-page.js'),
		meta: {
			label: '<<<',
			look: 'outline',
			color: 'positive',

		},
		conditions: [
			{
				alias: 'Umb.Condition.WorkspaceAlias',
				match: 'Umb.Workspace.Document',
			},
		],
	}

[Rockerby (Richard Ockerby)]

Nope - no option for icon. Here’s the render function for the workspace action button:

	#renderButton() {
		const label = this.#manifest?.meta.label
			? this.localize.string(this.#manifest.meta.label)
			: (this.#manifest?.name ?? '');
		return html`
			<uui-button
				data-mark="workspace-action:${this.#manifest?.alias}"
				.href=${this._href}
				look=${this.#manifest?.meta.look ?? 'default'}
				color=${this.#manifest?.meta.color ?? 'default'}
				label=${this._additionalOptions ? label + '…' : label}
				.disabled=${this._isDisabled}
				.state=${this._buttonState}
				@click=${this.#onClick}></uui-button>
		`;
	}

But you can render out whatever you fancy in that space by adding the element to your manifest and pointing to a custom element. Here’s a full example:

Manifest:

{
  type: 'workspaceAction',
  kind: 'default',
  name: 'Previous page',
  alias: 'local.previousPage.action',
  weight: 103,
  element: () => import('./custom.element'),
  api: () => import('./previous-page.js'),
  meta: {
    label: 'something',
    look: 'outline',
    color: 'positive'
  },
  conditions: [
    {
      alias: 'Umb.Condition.WorkspaceAlias',
      match: 'Umb.Workspace.Document',
    },
  ],
}

Custom element:

import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { LitElement, html, customElement } from "@umbraco-cms/backoffice/external/lit";

@customElement('custom-element-name')
export class CustomElement extends UmbElementMixin(LitElement) {

  render() {
    return html`
        <div>
            <p style="background:pink; padding:10px">I'm custom!</p>
        </div>
    `;
  }
}
export default CustomElement;

declare global {
  interface HTMLElementTagNameMap {
    'custom-element-name': CustomElement;
  }
}

[Rockerby (Richard Ockerby)]

I fell down a rabbit hole and wanted to get a working example for myself, so here’s a Gist for a workspace action, with a custom button that has an icon controlled by the meta

https://gist.github.com/Rockerby/d9eecc9122c61d7cf4f976b7aac63da4