diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index ec63c5b8c889..2274ed4635c6 100644
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -19,14 +19,14 @@ When icons are purely decorative, they should be hidden from assistive technolog
Take a regular `` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
{{< /example >}}
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
@@ -37,7 +37,7 @@ Take a regular `` element, add `.icon-link`, and insert an icon on either the
Add `.icon-link-hover` to move the icon to the right on hover.
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
@@ -54,7 +54,7 @@ Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to chang
Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
@@ -63,7 +63,7 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
Customize the color by overriding the `--bs-link-*` CSS variable:
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
@@ -80,7 +80,7 @@ Customize the icon link Sass variables to modify all icon link styles across you
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
Icon link
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index dc92d30e5ac9..94323c23352e 100644
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -32,11 +32,13 @@
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
- StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+ const iconsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-icons-snippet')
+ StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, iconsSnippet, classes)
})
})
- StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
+ StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, iconsSnippet, classes) => {
+ const icons = iconsSnippet ? `{{ os.ReadFile "site/layouts/partials/icons.html" }}` : ""
const markup = `
@@ -48,7 +50,7 @@
<${'script'} src="{{ .Site.Params.cdn.js_bundle }}">
-
+${icons.replace(/^/gm, ' ')}
${htmlSnippet.replace(/^/gm, ' ')}
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index a162db521d49..f112e1651f45 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -7,12 +7,14 @@
* lang: language used to display the code - default: "html"
* show_markup: if the markup should be output in the HTML - default: `true`
* show_preview: if the preview should be output in the HTML - default: `true`
+ * stackblitz_add_icons: if extra icons should be added to StackBlitz - default: `false`
* stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
*/ -}}
{{- $id := .Get "id" -}}
{{- $class := .Get "class" -}}
{{- $lang := .Get "lang" | default "html" -}}
+{{- $stackblitz_add_icons := .Get "stackblitz_add_icons" | default false -}}
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
@@ -31,7 +33,7 @@