How to set icon to a custom workspace in frappe framework

OmarJaber · July 1, 2024, 1:16pm

New update For V15 For how to change workspace icons

I am currently working on changing sidebar icons for the workspace and I would like to share the result

To change icons in V15
First I have Added a custom field called External Icon in workspace doctype(Attach image type)

Then you need to customize workspace.js file

github.com

frappe/frappe/blob/6a9b7890a42ed4944e732b808fcecc2cc5e85742/frappe/public/js/frappe/views/workspace/workspace.js#L118


      
          			>
          				<div class="desk-sidebar-item standard-sidebar-item ${item.selected ? "selected" : ""}">
          					<a
          						href="/app/${
          							item.public
          								? frappe.router.slug(item.title)
          								: "private/" + frappe.router.slug(item.title)
          						}"
          						class="item-anchor ${item.is_editable ? "" : "block-click"}" title="${__(item.title)}"
          					>
          						<span class="sidebar-item-icon" item-icon=${item.icon || "folder-normal"}>
          							${
          								item.public
          									? frappe.utils.icon(item.icon || "folder-normal", "md")
          									: `<span class="indicator ${item.indicator_color}"></span>`
          							}
          						</span>
          						<span class="sidebar-item-label">${__(item.title)}<span>
          					</a>
          					<div class="sidebar-item-control"></div>
          				</div>

This is my code, it will fetch the new icon from external icon field or get icon from the default icon field if no new icon added.

<span class="sidebar-item-icon" item-icon=${item.icon || "folder-normal"}>
	${
		item.custom_external_icon ? `<div class="icon icon-md divicon" aria-hidden="true"><img src="${item.custom_external_icon}"/></div>` : (item.public ? frappe.utils.icon(item.icon || "folder-normal", "md") : `<span class="indicator ${item.indicator_color}"></span>`)
	}

</span>

Result: