From 949882472d26b351ae153f4bcde71d3c95832abf Mon Sep 17 00:00:00 2001
From: Mikel Larreategi <mlarreategi@codesyntax.com>
Date: Fri, 25 Sep 2026 16:01:52 +0200
Subject: [PATCH 1/2] feat: render icons using Plone icons view

---
 src/cs_dynamicpages/views/dynamic_view.pt | 153 ++++++----------------
 1 file changed, 37 insertions(+), 116 deletions(-)

diff --git a/src/cs_dynamicpages/views/dynamic_view.pt b/src/cs_dynamicpages/views/dynamic_view.pt
index ebf2259..b1b51d1 100644
--- a/src/cs_dynamicpages/views/dynamic_view.pt
+++ b/src/cs_dynamicpages/views/dynamic_view.pt
@@ -33,17 +33,8 @@
                       data-position="0"
                       i18n:attributes="title"
               >
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     class="bi bi-plus-lg"
-                     fill="currentColor"
-                     height="16"
-                     viewbox="0 0 16 16"
-                     width="16"
-                >
-                  <path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
-                        fill-rule="evenodd"
-                  ></path>
-                </svg>
+                <span tal:replace="structure python:icons.tag('plus-lg')"></span>
+
               </button>
             </div>
 
@@ -71,27 +62,13 @@
                          title="Drag and drop"
                          i18n:attributes="title"
                     >
-                      <svg xmlns="http://www.w3.org/2000/svg"
-                           fill="currentColor"
-                           height="24"
-                           viewbox="0 0 24 24"
-                           width="24"
-                      >
-                        <path d="M10 4H4v6h6V4zm0 10H4v6h6v-6zm10-10h-6v6h6V4zm0 10h-6v6h6v-6z"></path>
-                      </svg>
+                      <span tal:replace="structure python:icons.tag('grip-vertical')"></span>
+
                     </div>
                     <small class="px-2 py-1 mb-3 border d-inline-flex align-items-center fw-semibold text-warning-emphasis bg-warning-subtle border-warning-subtle rounded-2 position-relative">
-                      <svg xmlns="http://www.w3.org/2000/svg"
-                           class="bi bi-info-circle"
-                           fill="currentColor"
-                           height="16"
-                           viewbox="0 0 16 16"
-                           width="16"
-                      >
-                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
-                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0">
-                        </path>
-                      </svg><span i18n:translate="">Template:
+                      <span tal:replace="structure python:icons.tag('info-circle')"></span>
+
+                      <span i18n:translate="">Template:
                         <span i18n:name="template_id">${row/row_template}</span></span>
                     </small>
 
@@ -99,16 +76,11 @@
                        href="${row/absolute_url}/edit"
                        title="Edit"
                        i18n:attributes="title"
-                    ><svg xmlns="http://www.w3.org/2000/svg"
-                           class="bi bi-pencil-fill"
-                           fill="currentColor"
-                           height="16"
-                           viewbox="0 0 16 16"
-                           width="16"
-                      >
-                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z">
-                        </path>
-                      </svg></a>
+                    >
+
+                      <span tal:replace="structure python:icons.tag('pencil-fill')"></span>
+
+                    </a>
                     <a class="btn btn-sm btn-danger align-self-start btn-delete-element"
                        href="#"
                        title="Delete"
@@ -116,16 +88,12 @@
                        data-bs-toggle="modal"
                        data-rowid="${row/id}"
                        i18n:attributes="title"
-                    ><svg xmlns="http://www.w3.org/2000/svg"
-                           class="bi bi-trash3"
-                           fill="currentColor"
-                           height="16"
-                           viewbox="0 0 16 16"
-                           width="16"
-                      >
-                        <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5">
-                        </path>
-                      </svg></a>
+                    >
+
+                      <span tal:replace="structure python:icons.tag('trash3')"></span>
+
+
+                    </a>
 
                     <div class="gap-2 ms-auto d-flex align-items-start">
 
@@ -140,17 +108,11 @@
                            style python:is_first and 'display:none' or '';
                          "
                          i18n:attributes="title"
-                      ><svg xmlns="http://www.w3.org/2000/svg"
-                             class="bi bi-arrow-up"
-                             fill="currentColor"
-                             height="16"
-                             viewbox="0 0 16 16"
-                             width="16"
-                        >
-                          <path d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"
-                                fill-rule="evenodd"
-                          ></path>
-                        </svg></a>
+                      >
+
+                        <span tal:replace="structure python:icons.tag('arrow-up')"></span>
+
+                      </a>
                       <a class="btn btn-outline-primary btn-sm align-self-start"
                          href="#"
                          title="Move down"
@@ -162,17 +124,11 @@
                            style python:is_last and 'display:none' or '';
                          "
                          i18n:attributes="title"
-                      ><svg xmlns="http://www.w3.org/2000/svg"
-                             class="bi bi-arrow-down"
-                             fill="currentColor"
-                             height="16"
-                             viewbox="0 0 16 16"
-                             width="16"
-                        >
-                          <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"
-                                fill-rule="evenodd"
-                          ></path>
-                        </svg></a>
+                      >
+
+                        <span tal:replace="structure python:icons.tag('arrow-down')"></span>
+
+                      </a>
                       <div class="btn-group">
                         <a class="btn btn-secondary dropdown-toggle"
                            aria-expanded="false"
@@ -185,17 +141,9 @@
                         'position-relative btn btn-outline-danger btn-sm bg-danger-subtle dropdown-toggle';
                            "
                         >
-                          <svg xmlns="http://www.w3.org/2000/svg"
-                               class="bi bi-info-circle"
-                               fill="currentColor"
-                               height="16"
-                               viewbox="0 0 16 16"
-                               width="16"
-                          >
-                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
-                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0">
-                            </path>
-                          </svg><span tal:omit-tag=""
+                          <span tal:replace="structure python:icons.tag('info-circle')"></span>
+
+                          <span tal:omit-tag=""
                                 i18n:translate=""
                           >Review state:
                             <span tal:omit-tag=""
@@ -334,17 +282,9 @@
                            href="${row/absolute_url}/++add++DynamicPageRowFeatured"
                            title="Add featured"
                            i18n:attributes="title"
-                        ><svg xmlns="http://www.w3.org/2000/svg"
-                               class="bi bi-plus-lg"
-                               fill="currentColor"
-                               height="16"
-                               viewbox="0 0 16 16"
-                               width="16"
-                          >
-                            <path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
-                                  fill-rule="evenodd"
-                            ></path>
-                          </svg></a>
+                        >
+                          <span tal:replace="structure python:icons.tag('plus-lg')"></span>
+                        </a>
                       </tal:featured_add_button>
                     </div>
                   </tal:condition>
@@ -366,17 +306,8 @@
                           "
                           i18n:attributes="title"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         class="bi bi-plus-lg"
-                         fill="currentColor"
-                         height="16"
-                         viewbox="0 0 16 16"
-                         width="16"
-                    >
-                      <path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
-                            fill-rule="evenodd"
-                      ></path>
-                    </svg>
+                    <span tal:replace="structure python:icons.tag('plus-lg')"></span>
+
                   </button>
                 </div>
               </div>
@@ -390,17 +321,7 @@
                       id="adminBarToggle"
                       type="button"
               >
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     class="bi bi-chevron-up"
-                     fill="currentColor"
-                     height="16"
-                     viewbox="0 0 16 16"
-                     width="16"
-                >
-                  <path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
-                        fill-rule="evenodd"
-                  ></path>
-                </svg>
+                <span tal:replace="structure python:icons.tag('chevron-up')"></span>
               </button>
               <div class="rows-mangement d-flex justify-content-center align-items-center gap-5 d-none">
                 <div tal:condition="python:len(view.rows()) and not view.self_in_templates()">

From 9795e8a1f75979db6bbae4a56b86b10150cd6b62 Mon Sep 17 00:00:00 2001
From: Mikel Larreategi <mlarreategi@codesyntax.com>
Date: Fri, 25 Sep 2026 16:02:17 +0200
Subject: [PATCH 2/2] changelog

---
 news/+icons.feature | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 news/+icons.feature

diff --git a/news/+icons.feature b/news/+icons.feature
new file mode 100644
index 0000000..5374af2
--- /dev/null
+++ b/news/+icons.feature
@@ -0,0 +1 @@
+Render icons using Plone's icons view @erral