From 5a2b1cb1d4fdd2552263940b5498716dda0db6e6 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 10:31:07 +0100 Subject: [PATCH 1/9] detailed icon functions and set usage --- .../back_office_elements/custom_icons.md | 23 +++++++++++++--- .../icon_twig_functions.md | 27 ++++++++++++------- 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index ebf829a49d..aa4acc1431 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -15,6 +15,8 @@ ibexa: content_type: article: thumbnail: /assets/images/custom_icon.svg#custom + category: + thumbnail: /bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#folder ``` Place the icon in `public/assets/images` and run `yarn encore ` after adding it. @@ -23,12 +25,14 @@ Place the icon in `public/assets/images` and run `yarn encore ` after To ensure proper display in the back office, all icons should have SVG format with `symbol`. -If you want to configure icons per SiteAccess, see [Icon sets](#icon-sets). +Use the scope if you want different icons for different SiteAccesses. -To see more configuration options, see [the icon reference](icon_twig_functions.md). +To see more `ibexaadminuiassets` icons, see [the icon reference](icon_twig_functions.md#icons-reference). ### Access icons in Twig templates +#### Content type icons + Content type icons are accessible in Twig templates via the `ibexa_content_type_icon` function. It requires content type identifier as an argument. The function returns the path to a content type icon. @@ -38,6 +42,10 @@ It requires content type identifier as an argument. The function returns the pat ``` +#### UI Icons + +See [`ibexa_icon_path`](icon_twig_functions.md#ibexa_icon_path). + ### Access icons in JavaScript Content types icons configuration is stored in a global object: `ibexa.adminUiConfig.contentTypes`. @@ -89,7 +97,9 @@ The following example from the `alert.js` file shows configuration for icons in - `name` - the path is generated inside the component provided you use icon from the system - `extraClasses` - additional CSS classes, use to set for example, icon size. -## Icon sets +## Customize UI icons + +### Icon sets You can configure icon sets to be used per SiteAccess: @@ -103,3 +113,10 @@ ibexa: additional_icons: /assets/images/icons/additional_icons.svg default_icon_set: my_icons ``` + +The icon sets are used by `ibexa_icon_path()` Twig function. +If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path()` without `set` argument targets icons from different set files. +If you change the file path of an icon set from one SiteAccess to another, ibexa_icon_path with the same `set` argument targets icons from different set files. + +The built-in default icon set is `ids-assets` (corresponding to `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg`). +To see the icons available in this set, see [the icon reference](icon_twig_functions.md#icons-reference). diff --git a/docs/templating/twig_function_reference/icon_twig_functions.md b/docs/templating/twig_function_reference/icon_twig_functions.md index 02befce41c..e4063ab77b 100644 --- a/docs/templating/twig_function_reference/icon_twig_functions.md +++ b/docs/templating/twig_function_reference/icon_twig_functions.md @@ -6,14 +6,14 @@ month_change: false # Icon Twig functions -### `ibexa_icon_path()` +## `ibexa_icon_path()` -`ibexa_icon_path()` generates a path to the selected icon from an [icon set](custom_icons.md#icon-sets). +`ibexa_icon_path()` generates a path to the selected icon from an [icon set](#icon-sets). -|Argument|Type|Description| -|------|------|------| -|`icon`|`string`|Identifier of an icon in the icon set.| -|`set`|`string`|Identifier of the configured icon set. If empty, the default icon set is used.| +| Argument | Type | Description | +|----------|----------|--------------------------------------------------------------------------------| +| `icon` | `string` | Identifier of an icon in the icon set. | +| `set` | `string` | Identifier of the configured icon set. If empty, the default icon set is used. | ```html+twig @@ -23,7 +23,7 @@ month_change: false The icons can be displayed in different colors and sizes. -#### Icon color variants +### Icon color variants By default, the icon inherits the [`fill`](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) attribute from the parent element. You can change it by using one of the available CSS modifiers: @@ -42,7 +42,7 @@ You can change it by using one of the available CSS modifiers: ``` -#### Icon size variants +### Icon size variants The default icon size in the back office is `32px`. To change the default size, in the template add the modifier to the class name. @@ -66,7 +66,7 @@ The list of available icon sizes: |`--large`|`48px`| |`--extra-large`|`64px`| -#### Icons reference +### Icons reference The following icons are available out-of-the-box: @@ -604,3 +604,12 @@ The following icons are available out-of-the-box: | ![zoom-in](img/icons/zoom-in.svg.png) | `zoom-in` | | ![zoom-out](img/icons/zoom-out.svg.png) | `zoom-out` | +## `ibexa_content_type_icon()` + +`ibexa_content_type_icon()` generates a path to a content type icon. + +| Argument | Type | Description | +|----------------|----------|--------------------------| +| `content_type` | `string` | Content type identifier. | + +See [Customize content type icons](custom_icons.md#customize-content-type-icons] to associate custom icons to content types. From baa1745f61903a852cf2b6df250d10dede6228e0 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 10:33:07 +0100 Subject: [PATCH 2/9] detailed icon functions and set usage --- .../back_office/back_office_elements/custom_icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index aa4acc1431..b4d17d0536 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -114,7 +114,7 @@ ibexa: default_icon_set: my_icons ``` -The icon sets are used by `ibexa_icon_path()` Twig function. +The icon sets are used by [`ibexa_icon_path()` Twig function](icon_twig_functions.md#ibexa_icon_path). If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path()` without `set` argument targets icons from different set files. If you change the file path of an icon set from one SiteAccess to another, ibexa_icon_path with the same `set` argument targets icons from different set files. From d2fc2247c47ce9ba7b6a5872a9270b3af216bd67 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 11:07:23 +0100 Subject: [PATCH 3/9] detailed icon functions and set usage --- .../back_office/back_office_elements/custom_icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index b4d17d0536..7981520dd5 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -27,7 +27,7 @@ Place the icon in `public/assets/images` and run `yarn encore ` after Use the scope if you want different icons for different SiteAccesses. -To see more `ibexaadminuiassets` icons, see [the icon reference](icon_twig_functions.md#icons-reference). +To see more Admin UI's `ids-assets` icons, see [the icon reference](icon_twig_functions.md#icons-reference). ### Access icons in Twig templates From 8525e95d92828dbabfbf25d7dfa2e70704aa0f00 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 11:26:32 +0100 Subject: [PATCH 4/9] detailed icon functions and set usage --- docs/templating/twig_function_reference/icon_twig_functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/templating/twig_function_reference/icon_twig_functions.md b/docs/templating/twig_function_reference/icon_twig_functions.md index e4063ab77b..f5df7aa1ce 100644 --- a/docs/templating/twig_function_reference/icon_twig_functions.md +++ b/docs/templating/twig_function_reference/icon_twig_functions.md @@ -8,7 +8,7 @@ month_change: false ## `ibexa_icon_path()` -`ibexa_icon_path()` generates a path to the selected icon from an [icon set](#icon-sets). +`ibexa_icon_path()` generates a path to the selected icon from an [icon set](custom_icons.md#icon-sets). | Argument | Type | Description | |----------|----------|--------------------------------------------------------------------------------| From 4528afe02121c88d66b1a46547093aadf53bf478 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 14:22:30 +0100 Subject: [PATCH 5/9] Adjustements --- .../back_office/back_office_elements/custom_icons.md | 4 ++-- .../templating/twig_function_reference/icon_twig_functions.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index 7981520dd5..1cb7d636ce 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -33,7 +33,7 @@ To see more Admin UI's `ids-assets` icons, see [the icon reference](icon_twig_fu #### Content type icons -Content type icons are accessible in Twig templates via the `ibexa_content_type_icon` function. +Content type icons are accessible in Twig templates via the [`ibexa_content_type_icon()` function](icon_twig_functions.md#ibexa_content_type_icon). It requires content type identifier as an argument. The function returns the path to a content type icon. ```twig @@ -44,7 +44,7 @@ It requires content type identifier as an argument. The function returns the pat #### UI Icons -See [`ibexa_icon_path`](icon_twig_functions.md#ibexa_icon_path). +User interface icons are accessible with [`ibexa_icon_path()` function](icon_twig_functions.md#ibexa_icon_path). The function returns a path from an icon identifier and an [icon set](#icon-sets) identifier arguments. ### Access icons in JavaScript diff --git a/docs/templating/twig_function_reference/icon_twig_functions.md b/docs/templating/twig_function_reference/icon_twig_functions.md index f5df7aa1ce..dfcdf9755c 100644 --- a/docs/templating/twig_function_reference/icon_twig_functions.md +++ b/docs/templating/twig_function_reference/icon_twig_functions.md @@ -612,4 +612,4 @@ The following icons are available out-of-the-box: |----------------|----------|--------------------------| | `content_type` | `string` | Content type identifier. | -See [Customize content type icons](custom_icons.md#customize-content-type-icons] to associate custom icons to content types. +See [Customize content type icons](custom_icons.md#customize-content-type-icons] to associate icons to content types. From ac2c214562ee7d54688cac9e1e9b4a032a5b8b77 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 14:31:05 +0100 Subject: [PATCH 6/9] icon_twig_functions.md: Fix Markdown syntax --- docs/templating/twig_function_reference/icon_twig_functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/templating/twig_function_reference/icon_twig_functions.md b/docs/templating/twig_function_reference/icon_twig_functions.md index dfcdf9755c..ca993200ad 100644 --- a/docs/templating/twig_function_reference/icon_twig_functions.md +++ b/docs/templating/twig_function_reference/icon_twig_functions.md @@ -612,4 +612,4 @@ The following icons are available out-of-the-box: |----------------|----------|--------------------------| | `content_type` | `string` | Content type identifier. | -See [Customize content type icons](custom_icons.md#customize-content-type-icons] to associate icons to content types. +See [Customize content type icons](custom_icons.md#customize-content-type-icons) to associate icons to content types. From 45feba38312ff0db277d4cc3b96aed566567424f Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 14:37:05 +0100 Subject: [PATCH 7/9] Adjustements --- .../back_office/back_office_elements/custom_icons.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index 1cb7d636ce..2fc5cff679 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -115,8 +115,9 @@ ibexa: ``` The icon sets are used by [`ibexa_icon_path()` Twig function](icon_twig_functions.md#ibexa_icon_path). -If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path()` without `set` argument targets icons from different set files. -If you change the file path of an icon set from one SiteAccess to another, ibexa_icon_path with the same `set` argument targets icons from different set files. + +- If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path(icon)` without `set` argument targets icons from different set files. +- If you change the file path of an icon set from one SiteAccess to another, `ibexa_icon_path(icon, set)` with the same `set` argument targets icons from different set files. The built-in default icon set is `ids-assets` (corresponding to `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg`). To see the icons available in this set, see [the icon reference](icon_twig_functions.md#icons-reference). From 8e434fe0238df7493bd6798941dd7e9ffcfa9745 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Mon, 26 Jan 2026 14:43:10 +0100 Subject: [PATCH 8/9] [Ibexa.Lists] Do not put fullstops at the end of bullets --- .../back_office/back_office_elements/custom_icons.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index 2fc5cff679..e2025ff44c 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -116,8 +116,8 @@ ibexa: The icon sets are used by [`ibexa_icon_path()` Twig function](icon_twig_functions.md#ibexa_icon_path). -- If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path(icon)` without `set` argument targets icons from different set files. -- If you change the file path of an icon set from one SiteAccess to another, `ibexa_icon_path(icon, set)` with the same `set` argument targets icons from different set files. +- If you change the `default_icon_set` from one SiteAccess to another, `ibexa_icon_path(icon)` without `set` argument targets icons from different set files +- If you change the file path of an icon set from one SiteAccess to another, `ibexa_icon_path(icon, set)` with the same `set` argument targets icons from different set files The built-in default icon set is `ids-assets` (corresponding to `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg`). To see the icons available in this set, see [the icon reference](icon_twig_functions.md#icons-reference). From 7d0c25f211528743a3263b06509272b280dc5f2c Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Wed, 28 Jan 2026 13:11:55 +0100 Subject: [PATCH 9/9] Apply suggestions from code review --- .../back_office/back_office_elements/custom_icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/administration/back_office/back_office_elements/custom_icons.md b/docs/administration/back_office/back_office_elements/custom_icons.md index e2025ff44c..cd38bf4267 100644 --- a/docs/administration/back_office/back_office_elements/custom_icons.md +++ b/docs/administration/back_office/back_office_elements/custom_icons.md @@ -25,7 +25,7 @@ Place the icon in `public/assets/images` and run `yarn encore ` after To ensure proper display in the back office, all icons should have SVG format with `symbol`. -Use the scope if you want different icons for different SiteAccesses. +Use the [scope](multisite_configuration.md#scope) if you want different icons for different SiteAccesses. To see more Admin UI's `ids-assets` icons, see [the icon reference](icon_twig_functions.md#icons-reference).