Document the icon type of web apps and extensions

docs/dev/web/extension-system/extensions/extension-types/account-extensions.md

@@ -20,15 +20,15 @@ interface AccountExtension {
   extensionPointIds?: string[]
   content: Slot | Component
   label: () => string
-  icon: string
+  icon: Icon
 }
 ```
 
 For `id`, `type`, and `extensionPointIds`, please see [base configuration section](../index.md#base-configuration) in the extensions docs.
 
 - `content` - The component to render inside the panel.
 - `label` - Returns the title of the panel. Wrap it in `$gettext` to make it translatable.
-- `icon` - The icon of the navigation entry, can be picked from [Remix Icon](https://remixicon.com/).
+- `icon` - The icon of the navigation entry, see the [icons section](../index.md#icons).
 
 ### Example
 

docs/dev/web/extension-system/extensions/extension-types/action-extensions.md

@@ -27,7 +27,7 @@ For `id`, `type`, and `extensionPointIds`, please see [base configuration sectio
 
 The most important configuration options are:
 
-- `icon` - The icon to be displayed, can be picked from [Remix Icon](https://remixicon.com/)
+- `icon` - The icon to be displayed, or a function returning it. See the [icons section](../index.md#icons)
 - `name` - The name of the action (not displayed in the UI)
 - `label` - The text to be displayed
 - `route` - The string/route to navigate to. The nav item will be a `<router-link>` tag.

docs/dev/web/extension-system/extensions/extension-types/app-menu-item-extensions.md

@@ -20,7 +20,7 @@ interface AppMenuItemExtension {
   label: () => string
   color?: string
   handler?: () => Promise<void> | void
-  icon?: string
+  icon?: Icon
   path?: string
   priority?: number
   url?: string
@@ -37,6 +37,8 @@ A `url` will result in an `<a>` element that links to an external page. External
 
 At least one of these properties has to be provided when registering an extension. If you define more than one, the priority order is `handler` > `path` > `url`.
 
+`icon` is the icon of the menu item, see the [icons section](../index.md#icons).
+
 `priority` specifies the order of the menu items. 50 is a good number to start with, then go up/down based on where the item should be placed. Defaults to the highest possible number, so the item will most likely end up at the bottom of the list if you don't specify a `priority`. Leave it empty if unsure what to pick.
 
 ## Example

docs/dev/web/extension-system/extensions/extension-types/floating-action-button-extensions.md

@@ -26,7 +26,7 @@ interface FloatingActionButtonExtension {
   isVisible?: () => boolean
   isDisabled?: () => boolean
   color?: string
-  icon?: string
+  icon?: Icon
   mode: () => 'drop' | 'handler'
   handler?: () => Promise<void> | void
   dropComponent?: Component
@@ -39,7 +39,7 @@ The `mode` property determines whether the floating action button triggers a han
 
 `isDisabled` controls the disabled state of the button whereas `isVisible` determines if the button is showing at all. `tooltip` returns the text of the tooltip, for example to explain why the button is disabled.
 
-`icon` is an icon name string that can be picked from [Remix Icon](https://remixicon.com/).
+`icon` is the icon of the button, see the [icons section](../index.md#icons).
 
 ### Example
 

docs/dev/web/extension-system/extensions/extension-types/folder-view-extensions.md

@@ -29,7 +29,7 @@ For the folderView object, you have the following configuration options:
 
 - `name` - The name of the action (not displayed in the UI)
 - `label` - The text to be displayed to the user when switching between different FolderView options
-- `icon` - Object, expecting an icon `name` and a corresponding `IconFillType`, see [Remix Icon](https://remixicon.com/) for available options
+- `icon` - The icon to be displayed to the user when switching between different FolderView options, see the [icons section](../index.md#icons)
 - `component` - The Vue component to render the resources. It should expect a prop of type `Resource[]`
 - `componentAttrs` - Optional function returning additional props for the component mentioned above
 

docs/dev/web/extension-system/extensions/extension-types/left-sidebar-menu-item-extensions.md

@@ -30,7 +30,7 @@ place your nav item in the left sidebar of that app.
 
 The most important configuration options are:
 
-- `icon` - The icon to be displayed, can be picked from [Remix Icon](https://remixicon.com/)
+- `icon` - The icon to be displayed, see the [icons section](../index.md#icons)
 - `name` - The text to be displayed
 - `route` - The string/route to navigate to, if the nav item should be a `<router-link>` (Mutually exclusive with `handler`)
 - `handler` - The action to perform upon click, if the nav item should be a `<button>` (Mutually exclusive with `route`)

docs/dev/web/extension-system/extensions/extension-types/resource-indicator-extensions.md

@@ -38,8 +38,7 @@ interface ResourceIndicatorIcon {
   accessibleDescription: string
   type: string
   category: 'system' | 'sharing' | 'space'
-  icon: string
-  fillType: IconFillType
+  icon: Icon
   handler?: (resource: Resource, event?: MouseEvent) => void
 }
 
@@ -54,6 +53,8 @@ interface ResourceIndicatorTag {
 }
 ```
 
+For the `icon`, please see the [icons section](../index.md#icons).
+
 ### Example
 
 The following example adds a lock icon to every resource that is marked as read only.
@@ -74,8 +75,7 @@ const extension: ResourceIndicatorExtension = {
         kind: 'icon',
         label: $gettext('Read only'),
         accessibleDescription: $gettext('This item cannot be modified'),
-        icon: 'lock-2',
-        fillType: 'line',
+        icon: { name: 'lock-2', fillType: 'line' },
         category: 'system',
         type: 'read-only'
       }

docs/dev/web/extension-system/extensions/extension-types/right-sidebar-panel-extensions.md

@@ -55,8 +55,7 @@ interface SideBarPanelContext<R extends Item, P extends Item, T extends Item> {
 ```typescript
 interface SideBarPanel<R extends Item, P extends Item, T extends Item> {
   name: string
-  icon: string
-  iconFillType?: IconFillType
+  icon: Icon
   title(context: SideBarPanelContext<R, P, T>): string
   isVisible(context: SideBarPanelContext<R, P, T>): boolean
   component: Component
@@ -66,7 +65,7 @@ interface SideBarPanel<R extends Item, P extends Item, T extends Item> {
 ```
 
 - `name` - A human readable id for the panel.
-- `icon`, `iconFillType` and `title` - Properties which are used to render the panel itself or right sidebar navigation items for navigating into that panel.
+- `icon` and `title` - Properties which are used to render the panel itself or right sidebar navigation items for navigating into that panel. For the `icon`, please see the [icons section](../index.md#icons).
 - `isVisible` - Determines if the panel is available for the given panel context.
 - `component` - Provides a component that renders the actual sidebar panel.
 - `componentAttrs` - Defines additional props for the component with the given panel context.

docs/dev/web/extension-system/extensions/index.md

@@ -26,6 +26,30 @@ For the `type` you can choose from the [predefined extension types](./extension-
 In addition, you can pass optional `extensionPointIds` to determine where the extension will appear. You can find all
 predefined ids in the [extension points docs](./extension-points).
 
+## Icons
+
+Wherever an extension or an app declares an `icon`, it accepts the `Icon` type from the design system. An icon can be
+declared in three ways:
+
+```typescript
+import type { Icon } from '@opencloud-eu/design-system/helpers'
+import iconUrl from './assets/icon.svg'
+import iconDarkUrl from './assets/icon-dark.svg'
+
+const iconName: Icon = 'brush'
+const namedIcon: Icon = { name: 'brush', fillType: 'line', color: '#e2725b' }
+const imageIcon: Icon = { src: iconUrl, srcDark: iconDarkUrl }
+```
+
+- A string is always the name of an icon from the icon set, which can be picked from [Remix Icon](https://remixicon.com/).
+- A named icon additionally carries its own `fillType` (`fill`, `line` or `none`) and `color`. Both are optional and
+  take precedence over what the rendering component would use.
+- An image icon ships your own image. It gets rendered as an `<img>` element and has neither a `fillType` nor a `color`.
+  The optional `srcDark` is used in dark mode.
+
+The sibling properties `iconFillType`, `iconColor` and `fillType`, which some types offer next to their `icon`, are
+deprecated. Please use a named icon instead.
+
 ## Registering extensions
 
 ### Via the app definition

docs/dev/web/extension-system/viewer-editor-apps/index.md

@@ -100,9 +100,11 @@ interface ApplicationFileExtension {
   hasPriority?: boolean
   label?: string
   name?: string
-  icon?: string
+  icon?: Icon
   mimeType?: string
   newFileMenu?: { menuTitle: () => string }
   routeName?: string
 }
 ```
+
+For the `icon`, please see the [icons section](../extensions/index.md#icons) in the extensions docs.