icons banner

src/pages/_docs/icons.md

 ---
 title: Icons
 menu: docs.content.icons
+description: Use one of over 1500 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+banner: icons
 ---
 
-All icons come from the Tabler Icons set and are MIT-licensed. Visit <a href="https://tabler-icons.io" target="_blank">tabler-icons.io</a>, download the icons you need in SVG, PNG or React and use them in your favourite design tools. You can show all icons and SVG codes [here]({{ site.base }}/icons.html).
-
-
 ## Base icon
 
 {% capture code %}

src/pages/_docs/switch-icon.md

@@ -2,6 +2,7 @@
 title: Switch icon
 menu: docs.components.switch-icon
 description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
+banner: icons
 ---
 
 ## Default markup

src/pages/_includes/cards/icons-banner.html

+<div class="card card-md{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="card-stamp card-stamp-lg">
+		<div class="card-stamp-icon bg-primary">
+			{% include ui/icon.html icon="ghost" %}
+		</div>
+	</div>
+	<div class="card-body">
+		<div class="row align-items-center">
+			<div class="col-10">
+				<h3 class="h1">Tabler Icons</h3>
+				<div class="markdown text-muted">
+					All icons come from the Tabler Icons set and are MIT-licensed. Visit
+					<a href="https://tabler-icons.io" target="_blank" rel="noopener">tabler-icons.io</a>, download
+					the icons you need in SVG, PNG or React and use them in your favourite design tools.
+				</div>
+				<div class="mt-3">
+					<a href="https://tabler-icons.io" class="btn btn-primary" target="_blank" rel="noopener">Download icons</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/pages/_includes/cards/icons.html

@@ -7,36 +7,17 @@
 	<div class="card-header">
 		<div class="card-title">{{ include.title }}</div>
 	</div>
-	<div class="card-body">
-		<div class="row" data-icon-preview>
-			<div class="col-md-6 col-lg-4">
-				{% assign first-icon = icons | first %}
-				{% capture first-icon-svg %}{% include ui/icon.html icon=first-icon %}{% endcapture %}
-
-				<div class="demo-icon-preview">
-					<div data-icon-preview-icon>
-						{{ first-icon-svg }}
-					</div>
-					<h2 class="my-2" data-icon-preview-title>{{ first-icon }}</h2>
-					<div class="demo-icon-preview-icon" data-icon-preview-code>
-						{% highlight html %}{{ first-icon-svg }}{% endhighlight %}
-					</div>
-				</div>
-			</div>
-			<div class="col">
-				<div class="demo-icons-list-wrap">
-					<div class="demo-icons-list">
-						{% for icon in icons limit: limit %}
-						<a href="#" class="demo-icons-list-item" data-toggle-icon="{{ icon }}" title="{{ icon }}" data-icon-svg="{% capture svg %}{% highlight html %}{% include ui/icon.html icon=icon %}{% endhighlight %}{% endcapture %}{{ svg | escape }}">
-							{% include ui/icon.html icon=icon %}
-							<div class="mt-1 text-muted fs-5">{{ icon }}</div>
-						</a>
-						{% endfor %}
-						{% for icon in (0..20) %}
-						<div></div>
-						{% endfor %}
-					</div>
-				</div>
+	<div class="card-body p-0">
+		<div class="demo-icons-list-wrap">
+			<div class="demo-icons-list">
+				{% for icon in icons limit: limit %}
+				<a href="#" class="demo-icons-list-item" title="{{ icon }}">
+					{% include ui/icon.html icon=icon %}
+				</a>
+				{% endfor %}
+				{% for icon in (0..20) %}
+				<div></div>
+				{% endfor %}
 			</div>
 		</div>
 	</div>

src/pages/_layouts/docs.html

@@ -12,6 +12,10 @@ page-header: Documentation
 		{% include docs/menu.html %}
 	</div>
 	<div class="col-lg-9">
+		{% if page.banner == 'icons' %}
+		{% include cards/icons-banner.html class="mb-3" %}
+		{% endif %}
+
 		<div class="card card-lg">
 			<div class="card-body">
 				<div class="markdown">
@@ -30,7 +34,7 @@ page-header: Documentation
 						</div>
 
 						{% if page.description %}
-						<p>{{ page.description }}</p>
+						<p class="mb-5 text-muted">{{ page.description }}</p>
 						{% endif %}
 
 						{% if page.plugin %}

src/pages/icons.html

@@ -16,49 +16,15 @@ menu: base.icons
 {% endif %}
 {% endfor %}
 
-<div class="alert alert-primary mb-3">
-	All icons come from the Tabler Icons set and are MIT-licensed. Visit
-	<a href="https://tabler-icons.io" target="_blank">tabler-icons.io</a>, download
-	the icons you need in SVG, PNG or React and use them in your favourite design tools.
-</div>
 
 <div class="row row-cards">
 	<div class="col-12">
-		{% include cards/icons.html title="Tabler icons" icons=icons-core %}
+		{% include cards/icons-banner.html %}
+	</div>
+	<div class="col-12">
+		{% include cards/icons.html title="Interface icons" icons=icons-core %}
 	</div>
 	<div class="col-12">
 		{% include cards/icons.html title="Brand icons" icons=icons-brand %}
 	</div>
 </div>
-
-<script>
-	var getClosest = function (elem, selector) {
-		for (; elem && elem !== document; elem = elem.parentNode) {
-			if (elem.matches(selector)) return elem
-		}
-		return null
-	};
-
-	(function () {
-		const elements = document.querySelectorAll('[data-toggle-icon]')
-
-		if (elements.length) {
-			elements.forEach(function (element) {
-				element.addEventListener('click', function (e) {
-					var icon = this.dataset.toggleIcon,
-							  svg = this.querySelector('svg').outerHTML,
-							  iconCode = this.dataset.iconSvg,
-							  editor = getClosest(this, '[data-icon-preview]')
-
-					editor.querySelector('[data-icon-preview-icon]').innerHTML = svg
-					editor.querySelector('[data-icon-preview-title]').innerText = icon
-					editor.querySelector('[data-icon-preview-code]').innerHTML = iconCode.trim()
-
-					e.preventDefault()
-					return false
-				})
-			})
-		}
-	})()
-</script>
-

src/scss/demo.scss

@@ -60,7 +60,7 @@ body.no-transitions * {
 }
 
 
-$demo-icon-size: 7rem;
+$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -82,7 +82,7 @@ $demo-icon-size: 7rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: $demo-icon-size;
+  aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
   border-right: 1px solid var(--#{$variable-prefix}border-color);

src/scss/ui/_cards.scss

@@ -33,6 +33,10 @@
   pointer-events: none;
 }
 
+.card-stamp-lg {
+  --stamp-size: 13rem;
+}
+
 .card-stamp-icon {
   background: $text-muted;
   color: $white;
@@ -269,7 +273,7 @@ Card footer
 
   .card-md > & {
     @include media-breakpoint-up(md) {
-      padding: 2rem;
+      padding: 2.5rem;
     }
   }