Restore icons page

site/assets/scss/_component-examples.scss

@@ -502,13 +502,13 @@
 // scss-docs-start icon-home
 .icon-home::before {
   display: inline-block;
-  width: 2rem;
-  height: 2rem;
+  width: 3rem;
+  height: 3rem;
   vertical-align: bottom;
   content: "";
   background-color: var(--bs-color-content-default);
   background-size: contain;
-  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M553.478 147.416v.017a74.956 74.956 0 0 0-107.08.13v-.021L100 500h150v300a75 75 0 0 0 75 75h350a75 75 0 0 0 75-75V500h150ZM580 537.52V755H362.5a37.5 37.5 0 0 1-37.5-37.5V500h217.5a37.5 37.5 0 0 1 37.5 37.5v.02Z'/></svg>");
+  mask-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M553.478 147.416v.017a74.956 74.956 0 0 0-107.08.13v-.021L100 500h150v300a75 75 0 0 0 75 75h350a75 75 0 0 0 75-75V500h150ZM580 537.52V755H362.5a37.5 37.5 0 0 1-37.5-37.5V500h217.5a37.5 37.5 0 0 1 37.5 37.5v.02Z'/></svg>"));
 }
 // scss-docs-end icon-home
 

site/content/docs/0.2/components/buttons.md

@@ -87,10 +87,12 @@ OUDS Web offers a few variations to use on [colored backgrounds]({{< docsref "/u
 
 ### Text and icon
 
-The recommended way of using an icon in a button is an embedded SVG<!-- ({{< docsref "/extend/icons" >}}) -->. You need to:
+{{< callout info >}}
+The recommended way of using an icon in a button is through an [SVG sprite file]({{< docsref "/extend/icons/#svg-sprite" >}}). You need to:
 
 - set its dimensions to default `1rem` size, the icon will adapt automatically,
-- fill it using `currentColor` to respect button color scheme.
+- fill it using `currentColor` to respect the button color scheme (can be set directly inside the SVG sprite).
+{{< /callout >}}
 
 You don't need to apply any spacing utility on the icon to get consistent spacing, as the margin is already handled by OUDS Web.
 

site/content/docs/0.2/components/links.md

@@ -60,14 +60,13 @@ Add `.link-chevron` to enhance your link with a chevron on the right side. Use t
 
 ## Icon link
 
-The `.icon-link` class modifies the default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We style the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
-
 {{< callout info >}}
-Inside links, you should use Solaris icons, either in an SVG sprite (`<symbol>` element in an SVG file), which is the recommended method, or in an icon font. You can generate both with [Solaris Icons Finder](https://oran.ge/icons).
-
-We strongly advise against using an `<img>` or other techniques, especially because the icon will not benefit from dynamic color changes across states (hover, focus, active) and the color mode system will not work.
+The recommended way of using an icon in a button is through an [SVG sprite file]({{< docsref "/extend/icons/#svg-sprite" >}}). You need to fill it using `currentColor` to respect the link color scheme (can be set directly inside the SVG sprite).
 {{< /callout >}}
 
+
+The `.icon-link` class modifies the default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We style the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
+
 If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `font-size` and `line-height`.
 
 {{< callout >}}

site/content/docs/0.2/content/typography.md

@@ -76,7 +76,7 @@ All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-s
 <p class="h6">h6. OUDS Web heading</p>
 {{< /example >}}
 
-You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+You can easily add an icon with your font reference using [our icon size utilities]({{< docsref "/extend/icons#icons-size" >}}).
 
 <!-- OUDS mod: No customizing heading -->
 
@@ -182,7 +182,7 @@ Body medium is set by default on `:root` children but we don't set the `max-widt
 
 </details>
 
-You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+You can easily add an icon with your font reference using [our icon size utilities]({{< docsref "/extend/icons#icons-size" >}}).
 
 ### Lead