icon fix

docs/ui/components/alerts.mdx

@@ -120,7 +120,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -204,7 +204,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -216,7 +216,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -228,7 +228,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
       <svg>...</svg>
     </div>
     <div>
@@ -240,7 +240,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -381,7 +381,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -393,7 +393,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-info alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -405,7 +405,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-warning alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
       <svg>...</svg>
     </div>
     <div>
@@ -417,7 +417,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
       <svg>...</svg>
     </div>
     <div>

docs/ui/components/avatars.mdx

@@ -66,7 +66,7 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
 
 ```html
 <span class="avatar">
-  <!-- SVG icon from http://tabler-icons.io/i/user -->
+  <!-- SVG icon from http://tabler.io/icons/icon/user -->
   <svg>...</svg>
 </span>
 ```

docs/ui/components/breadcrumb.mdx

@@ -96,7 +96,7 @@ If you wish to use breadcrumbs in headers, place them above the headers.
     <div class="col-auto">
       <div class="btn-list">
         <a href="#" class="btn d-none d-md-inline-flex">
-          <!-- SVG icon from http://tabler-icons.io/i/edit -->
+          <!-- SVG icon from http://tabler.io/icons/icon/edit -->
           <svg>...</svg> Edit
         </a>
         <a href="#" class="btn btn-primary">Publish</a>

docs/ui/components/buttons.mdx

@@ -335,12 +335,12 @@ You can use the icons of popular social networking sites, which users are famili
 
 ```html
 <a href="#" class="btn btn-facebook">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg>...</svg>
   Facebook
 </a>
 <a href="#" class="btn btn-twitter">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
   <svg>...</svg>
   Twitter
 </a>
@@ -511,59 +511,59 @@ You can also add an icon without the name of a social networking site, if you wa
 
 ```html
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-google btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-google -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-youtube -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-vimeo -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-dribbble -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-github -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-instagram -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-pinterest -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-vk -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/rss -->
+  <!-- SVG icon from http://tabler.io/icons/icon/rss -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-flickr -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-tabler -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg>...</svg>
 </a>
 ```
@@ -631,31 +631,31 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 ```html
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/activity -->
+  <!-- SVG icon from http://tabler.io/icons/icon/activity -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-github -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-success btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/bell -->
+  <!-- SVG icon from http://tabler.io/icons/icon/bell -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/star -->
+  <!-- SVG icon from http://tabler.io/icons/icon/star -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/trash -->
+  <!-- SVG icon from http://tabler.io/icons/icon/trash -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/chart-bar -->
+  <!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
   <svg>...</svg>
 </a>
 <a href="#" class="btn btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler-icons.io/i/git-merge -->
+  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <svg>...</svg>
 </a>
 ```
@@ -707,7 +707,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
 ```html
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler-icons.io/i/calendar -->
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
   </button>
   <div class="dropdown-menu">
@@ -721,7 +721,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
 </div>
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler-icons.io/i/calendar -->
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
     Show calendar
   </button>

docs/ui/components/empty.mdx

@@ -94,7 +94,7 @@ Instead of adding an icon or illustration you can simply give the text:
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <!-- SVG icon from http://tabler-icons.io/i/arrow-left -->
+      <!-- SVG icon from http://tabler.io/icons/icon/arrow-left -->
       <svg>...</svg>
       Take me home
     </a>

docs/ui/components/icons.mdx

@@ -109,12 +109,12 @@ banner: icons
 ```
 
 ```html
-<!-- SVG icon from http://tabler-icons.io/i/heart -->
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
 <svg class="icon-pulse" ...>...</svg>
 
-<!-- SVG icon from http://tabler-icons.io/i/bell -->
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
 <svg class="icon-tada" ...>...</svg>
 
-<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
 <svg class="icon-rotate" ...>...</svg>
 ```

docs/ui/components/ribbons.mdx

@@ -25,7 +25,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
   <div class="card-body">
   </div>
   <div class="ribbon">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -60,7 +60,7 @@ Using multiple classes at once will give you more position options. For example,
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-top ribbon-start">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -88,7 +88,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
   <div class="card-body">
   </div>
   <div class="ribbon bg-red">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -116,7 +116,7 @@ Add your own text to a ribbon to display any additional information and make it
   <div class="card-body">
   </div>
   <div class="ribbon bg-green">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -144,7 +144,7 @@ Change the style of a ribbon to make it go well with your interface design.
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-bookmark bg-orange">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>

docs/ui/components/timelines.mdx

@@ -147,7 +147,7 @@ The available timeline design is comprised of many components that will help you
 ```html
 <ul class="timeline">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -159,7 +159,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -171,7 +171,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -183,7 +183,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -195,7 +195,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -214,7 +214,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -239,7 +239,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -398,7 +398,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
 ```html
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -410,7 +410,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -422,7 +422,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -434,7 +434,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -446,7 +446,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -465,7 +465,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -490,7 +490,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">

docs/ui/forms/form-elements.mdx

@@ -48,7 +48,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
   <div class="input-icon">
     <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
     <span class="input-icon-addon">
-      <!-- SVG icon from http://tabler-icons.io/i/search -->
+      <!-- SVG icon from http://tabler.io/icons/icon/search -->
       <svg>...</svg>
     </span>
   </div>

src/pages/_includes/ui/icon.html

@@ -26,7 +26,7 @@
 {% if site.use-iconfont %}
 	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
 {% else %}
-	<!-- Download SVG icon from http://tabler-icons.io/i/{{ icon-name }} -->
+	<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
 	{% assign svg-icon = site.data.icons[icon-name].svg[type] | default: '' %}
 	{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
 {% endif %}