Icons integration tutorial (#2215)

* Icons integration tutorial

* Corrections

* Corrections #2

---------

Co-authored-by: Bartosz Cylwik <bartosz.cylwik94@gmail.com>

site/content/docs/standard/getting-started/icons-integration/index-js.html

@@ -0,0 +1,14 @@
+---
+---
+
+<script type="module">
+  // datetimepicker
+  const datetimepickerCustomization = document.querySelector(
+    "#datetimepicker-customization"
+  );
+  new te.Datetimepicker(datetimepickerCustomization, {
+    dateTimepickerToggleIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
+          </svg>`,
+  });
+</script>

site/content/docs/standard/getting-started/icons-integration/index-ss.html

@@ -0,0 +1,23 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#introduction">Introduction</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#top-layer">Top-layer customization</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#options-data-attributes"
+    >Customization via options and data attributes</a
+  >
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#other-icon-libraries">Other icon libraries</a>
+</li>
+<li class="mb-1 ml-4 pl-[9px] text-[0.85rem]">
+  <a href="#font-awesome">Font Awesome</a>
+</li>
+<li class="mb-1 ml-4 pl-[9px] text-[0.85rem]">
+  <a href="#google-icons">Google icons</a>
+</li>