feat: Add new mdi New file menu icons

apps/files/lib/ResponseDefinitions.php

@@ -44,6 +44,7 @@
  *     label: string,
  *     extension: string,
  *     iconClass: ?string,
+ *     iconSvgInline: ?string,
  *     mimetypes: string[],
  *     ratio: ?float,
  *     actionLabel: string,

apps/files/openapi.json

@@ -151,6 +151,7 @@
                     "label",
                     "extension",
                     "iconClass",
+                    "iconSvgInline",
                     "mimetypes",
                     "ratio",
                     "actionLabel"
@@ -169,6 +170,10 @@
                         "type": "string",
                         "nullable": true
                     },
+                    "iconSvgInline": {
+                        "type": "string",
+                        "nullable": true
+                    },
                     "mimetypes": {
                         "type": "array",
                         "items": {

apps/files/src/newMenu/newFromTemplate.ts

@@ -64,8 +64,8 @@ export function registerTemplateEntries() {
 		addNewFileMenuEntry({
 			id: `template-new-${provider.app}-${index}`,
 			displayName: provider.label,
-			// TODO: migrate to inline svg
 			iconClass: provider.iconClass || 'icon-file',
+			iconSvgInline: provider.iconSvgInline,
 			enabled(context: Folder): boolean {
 				return (context.permissions & Permission.CREATE) !== 0
 			},

apps/files/src/types.ts

@@ -117,6 +117,7 @@ export interface TemplateFile {
 	label: string
 	extension: string
 	iconClass?: string
+	iconSvgInline?: string
 	mimetypes: string[]
 	ratio?: number
 	templates?: Record<string, unknown>[]

core/src/icons.js

@@ -125,6 +125,10 @@ const icons = {
 }
 
 const iconsColor = {
+	'add-folder-description': {
+		path: path.join(__dirname, '../img', 'actions', 'add-folder-description.svg'),
+		color: 'grey',
+	},
 	'settings': {
 		path: path.join(__dirname, '../img', 'actions', 'settings.svg'),
 		color: 'black',
@@ -167,6 +171,10 @@ const iconsColor = {
 		// TODO: replace primary ?
 		color: 'primary',
 	},
+	'filetype-text': {
+		path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
+		color: 'grey',
+	},
 }
 
 // use this to define aliases to existing icons
@@ -210,7 +218,6 @@ const iconsAliases = {
 	'icon-category-security': 'icon-password-dark',
 	'icon-category-search': 'icon-search-dark',
 	'icon-category-tools': 'icon-settings-dark',
-	'icon-filetype-text': 'icon-file-grey',
 	'nav-icon-systemtagsfilter': 'icon-tag-dark',
 }
 

dist/icons.css

@@ -209,16 +209,18 @@
   --original-icon-view-play-white: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSItLjMiIHk9Ii0uMyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSIxLjYiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMyIvPjwvZmlsdGVyPjwvZGVmcz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjY2NyAtODQ3LjY3KSBzY2FsZSguODMzMzMpIiBkPSJtNCAxMDI0LjQgMjQgMTItMjQgMTJ6IiBmaWx0ZXI9InVybCgjYSkiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyLjQiIGZpbGw9IiNmZmZmZmYiLz48cGF0aCBkPSJtNiA1Ljk5MyAyMCAxMC0yMCAxMHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4K);
   --original-icon-view-previous-dark: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im01LjUgOCA2IDZ2MWwtNy03IDctN3YxeiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPgo=);
   --original-icon-view-previous-white: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im01LjUgOCA2IDZ2MWwtNy03IDctN3YxeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPgo=);
+  --icon-add-folder-description-grey: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk2OTY5NiI+Cgk8cGF0aCBkPSJNMCAwaDI0djI0SDBWMHoiIGZpbGw9Im5vbmUiIC8+Cgk8cGF0aCBmaWxsPSIjOTY5Njk2IiBkPSJNMyAxOGgxMnYtMkgzdjJ6TTMgNnYyaDE4VjZIM3ptMCA3aDE4di0ySDN2MnoiIC8+Cjwvc3ZnPgo=);
   --icon-settings-black: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im02Ljk0IDAuNWMtMC4yNCAwLTAuNDQgMC4yLTAuNDQgMC40NHYxLjI2Yy0wLjUgMC4xNC0xLjA1IDAuMzUtMS41MyAwLjY1bC0wLjkxLTAuOTFjLTAuMTYtMC4xOC0wLjQ2LTAuMTktMC42MiAwbC0xLjUgMS41Yy0wLjE4IDAuMTctMC4xOCAwLjQ2IDAgMC42MmwwLjkxIDAuOTFjLTAuMjg0IDAuNDgtMC41IDEtMC42NSAxLjUzaC0xLjI2Yy0wLjI0IDAtMC40NCAwLjItMC40NCAwLjQ0djIuMTJjMCAwLjI1IDAuMTkgMC40NCAwLjQ0IDAuNDRoMS4yNmMwLjE0IDAuNTQgMC4zNiAxLjA1IDAuNjUgMS41M2wtMC45MSAwLjkxYy0wLjE4IDAuMTctMC4xOCAwLjQ1IDAgMC42MmwxLjUgMS41YzAuMTggMC4xOCAwLjQ2IDAuMTggMC42MiAwbDAuOTEtMC45MWMwLjQ4IDAuMjg1IDEgMC41IDEuNTMgMC42NXYxLjI2YzAgMC4yNSAwLjIgMC40NCAwLjQ0IDAuNDRoMi4xMmMwLjI0IDAgMC40NS0wLjIgMC40NC0wLjQ0di0xLjI2YzAuNTQtMC4xNCAxLjA1LTAuMzYgMS41My0wLjY1bDAuOTEgMC45MWMwLjE3IDAuMTggMC40NSAwLjE4IDAuNjIgMGwxLjUtMS41YzAuMTgtMC4xNyAwLjE4LTAuNDUgMC0wLjYybC0wLjkxLTAuOTFjMC4yOS0wLjQ4IDAuNS0xIDAuNjUtMS41M2gxLjI2YzAuMjQgMCAwLjQ1LTAuMiAwLjQ0LTAuNDR2LTIuMTJjMC0wLjI0LTAuMi0wLjQ0LTAuNDQtMC40NGgtMS4yNmMtMC4xNC0wLjU0LTAuMzYtMS4wNS0wLjY1LTEuNTNsMC45MS0wLjkxYzAuMTgtMC4xNyAwLjE4LTAuNDUgMC0wLjYybC0xLjUtMS41Yy0wLjE3LTAuMTgtMC40NS0wLjE4LTAuNjIgMGwtMC45MSAwLjkxYy0wLjQ4LTAuMjktMS0wLjUtMS41My0wLjY1di0xLjI2YzAtMC4yNC0wLjItMC40NC0wLjQ0LTAuNDRoLTIuMTJ6bTEuMDYgNGEzLjUgMy41IDAgMCAxIDMuNSAzLjUgMy41IDMuNSAwIDAgMS0zLjUgMy41IDMuNSAzLjUgMCAwIDEtMy41LTMuNSAzLjUgMy41IDAgMCAxIDMuNS0zLjV6IiBvcGFjaXR5PSIuNSIgZmlsbD0iIzAwMCIvPjwvc3ZnPgo=);
   --icon-error-color-red: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik01LjUxNiAyTDIgNS41MTZ2NC45NjhMNS41MTYgMTRoNC45NjhMMTQgMTAuNDg0VjUuNTE2TDEwLjQ4NCAySDUuNTE2ek03IDRoMnY1SDdWNHptMCA2aDJ2Mkg3di0yeiIgZmlsbD0iI2U5MzIyZCIvPjwvc3ZnPgo=);
   --icon-checkmark-color-green: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yLjM1IDcuMyA0IDQgNy4zLTcuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDZiYTYxIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4K);
   --icon-starred-yellow: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im04IDAuNSAyLjIgNS4zIDUuOCAwLjQ1LTQuNSAzLjc1IDEuNSA1LjUtNS0zLjEtNSAzLjEgMS41LTUuNS00LjUtMy43NSA1LjgtMC40NXoiIGZpbGw9IiNhMDhiMDAiLz48L3N2Zz4K);
   --icon-star-grey: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im04IDAuNSAyLjIgNS4zIDUuOCAwLjQ1LTQuNSAzLjc1IDEuNSA1LjUtNS0zLjEtNSAzLjEgMS41LTUuNS00LjUtMy43NSA1LjgtMC40NXoiIGZpbGw9IiM5Njk2OTYiLz48L3N2Zz4K);
   --icon-delete-color-red: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02LjUgMUw2IDJIM2MtLjU1NCAwLTEgLjQ0Ni0xIDF2MWgxMlYzYzAtLjU1NC0uNDQ2LTEtMS0xaC0zbC0uNS0xek0zIDVsLjg3NSA5Yy4wNi41NS41NzMgMSAxLjEyNSAxaDZjLjU1MiAwIDEuMDY0LS40NSAxLjEyNS0xTDEzIDV6IiBmaWxsPSIjZTkzMjJkIi8+PC9zdmc+Cg==);
-  --icon-file-grey: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yLjUgMWMtMC4yOCAwLTAuNSAwLjIyLTAuNSAwLjV2MTNjMCAwLjI4IDAuMjIgMC41IDAuNSAwLjVoMTFjMC4yOCAwIDAuNS0wLjIyIDAuNS0wLjV2LTEwLjVsLTMtM2gtOC41em0xLjUgMmg2djFoLTZ2LTF6bTAgM2g1djFoLTV2LTF6bTAgM2g4djFoLTh2LTF6bTAgM2g0djFoLTR2LTF6IiBmaWxsPSIjOTY5Njk2Ii8+PC9zdmc+Cg==);
+  --icon-file-grey: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjOTY5Njk2Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+Cgk8cGF0aCBmaWxsPSIjOTY5Njk2IgoJCWQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiIC8+Cjwvc3ZnPgo=);
   --icon-filetype-file-grey: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yLjUgMWMtMC4yOCAwLTAuNSAwLjIyLTAuNSAwLjV2MTNjMCAwLjI4IDAuMjIgMC41IDAuNSAwLjVoMTFjMC4yOCAwIDAuNS0wLjIyIDAuNS0wLjV2LTEwLjVsLTMtM3oiIGZpbGw9IiM5Njk2OTYiLz48L3N2Zz4K);
   --icon-filetype-folder-primary: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
   --icon-filetype-folder-drag-accept-primary: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjQ2IDJjLS4yNSAwLS40Ni4yMS0uNDYuNDZ2MTEuMDhjMCAuMjU4LjIwMi40Ni40Ni40NmgxMy4wOGMuMjU4IDAgLjQ2LS4yMDIuNDYtLjQ2VjQuNDYyYzAtLjI1LS4yMS0uNDYzLS40Ni0uNDYzSDhMNiAySDEuNDZ6TTIgNWgxMnY4SDJWNXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
+  --icon-filetype-text-grey: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjOTY5Njk2Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+Cgk8cGF0aCBmaWxsPSIjOTY5Njk2IgoJCWQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiIC8+Cjwvc3ZnPgo=);
 }
 
 body {
@@ -1273,6 +1275,9 @@ body .icon-view-previous-white,
 body .icon-view-previous.icon-white {
   background-image: var(--icon-view-previous-white);
 }
+body .icon-add-folder-description {
+  background-image: var(--icon-add-folder-description-grey);
+}
 body .icon-settings {
   background-image: var(--icon-settings-black);
 }
@@ -1303,6 +1308,9 @@ body .icon-filetype-folder {
 body .icon-filetype-folder-drag-accept {
   background-image: var(--icon-filetype-folder-drag-accept-primary);
 }
+body .icon-filetype-text {
+  background-image: var(--icon-filetype-text-grey);
+}
 body .icon-caret {
   background-image: var(--icon-caret-white);
 }
@@ -1396,9 +1404,6 @@ body .icon-category-search {
 body .icon-category-tools {
   background-image: var(--icon-settings-dark);
 }
-body .icon-filetype-text {
-  background-image: var(--icon-file-grey);
-}
 body .nav-icon-systemtagsfilter {
   background-image: var(--icon-tag-dark);
 }

lib/public/Files/Template/TemplateFileCreator.php

@@ -37,6 +37,8 @@ final class TemplateFileCreator implements \JsonSerializable {
 	protected $fileExtension;
 	/** @var ?string $iconClass */
 	protected $iconClass;
+	/** @var ?string $iconSvgInline */
+	protected $iconSvgInline;
 	/** @var ?float $ratio */
 	protected $ratio = null;
 	protected $order = 100;
@@ -66,12 +68,21 @@ public function getAppId(): string {
 
 	/**
 	 * @since 21.0.0
+	 * @deprecated 29.0.0
 	 */
 	public function setIconClass(string $iconClass): TemplateFileCreator {
 		$this->iconClass = $iconClass;
 		return $this;
 	}
 
+	/**
+	 * @since 29.0.0
+	 */
+	public function setIconSvgInline(string $iconSvgInline): TemplateFileCreator {
+		$this->iconSvgInline = $iconSvgInline;
+		return $this;
+	}
+
 	/**
 	 * @since 21.0.0
 	 */
@@ -128,14 +139,15 @@ public function getActionLabel(): string {
 
 	/**
 	 * @since 21.0.0
-	 * @return array{app: string, label: string, extension: string, iconClass: ?string, mimetypes: string[], ratio: ?float, actionLabel: string}
+	 * @return array{app: string, label: string, extension: string, iconClass: ?string, iconSvgInline: ?string, mimetypes: string[], ratio: ?float, actionLabel: string}
 	 */
 	public function jsonSerialize(): array {
 		return [
 			'app' => $this->appId,
 			'label' => $this->actionName,
 			'extension' => $this->fileExtension,
 			'iconClass' => $this->iconClass,
+			'iconSvgInline' => $this->iconSvgInline,
 			'mimetypes' => $this->mimetypes,
 			'ratio' => $this->ratio,
 			'actionLabel' => $this->actionLabel,