feat: generate desktop icon using the first letter of the label

frappe/desk/page/desktop/desktop.css

@@ -117,7 +117,7 @@
 }
 .icon-container{
     padding: 10px;
-    border-radius: 10px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -249,6 +249,7 @@
 }
 
 .folder-icon{
+    border-radius: 10px;
    background-color: var(--folder-icon-background-color) !important;
     box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.14);
     padding: 7px;

frappe/hooks.py

@@ -41,6 +41,7 @@ app_include_icons = [
 	"/assets/frappe/icons/icons.svg",
 	"/assets/frappe/icons/timeless/icons.svg",
 	"/assets/frappe/icons/espresso/icons.svg",
+	"/assets/frappe/icons/desktop_icons/alphabets.svg",
 ]
 
 doctype_js = {

frappe/public/js/frappe/ui/desktop_icon.html

@@ -12,9 +12,7 @@
 
         </div>
     {% } else { %}
-        <div class="icon-container">
-            {%= frappe.utils.icon(icon.icon || "list-alt" , "lg", "", "", "text-ink-gray-7 current-color", true)%}
-        </div>
+            {%= frappe.utils.desktop_icon(icon.label.charAt(0).toUpperCase(),"gray")%}
     {% } %}
     {% if (!in_folder) { %}
     <div class="icon-caption">

frappe/public/js/frappe/utils/utils.js

@@ -1276,7 +1276,29 @@ Object.assign(frappe.utils, {
 		},
 		image_path: "/assets/frappe/images/leaflet/",
 	},
-
+	desktop_icon(letter, color) {
+		let opacity_hex = "1A";
+		let icon_html = $(`
+			<div class="icon-container">
+				<svg fill="currentColor" class="desktop-alphabet icon text-ink-gray-7 icon-lg" stroke=none style="" aria-hidden="true">
+				<use class="" href="#${letter}"></use>
+				</svg>
+			</div>
+		`);
+		let color_value = this.desktop_pallete[color || "blue"];
+		let bg_color = color_value + opacity_hex;
+		icon_html.css("backgroundColor", bg_color);
+		icon_html.find("svg").css("color", color_value);
+		return icon_html.get(0).outerHTML;
+	},
+	desktop_pallete: {
+		blue: "#0981E3",
+		gray: "#7B808A",
+	},
+	desktop_bg_color(color_name) {
+		let color_value = this.desktop_pallete[color_name];
+		color_value + "";
+	},
 	icon(
 		icon_name,
 		size = "sm",

frappe/public/scss/desk/global.scss

@@ -725,3 +725,6 @@ details > summary:focus {
 	direction: ltr;
 }
 */
+.desktop-alphabet {
+	stroke: none;
+}