diff --git a/app/components/button.hbs b/app/components/button.hbs
index e0cdd96..130c06d 100644
--- a/app/components/button.hbs
+++ b/app/components/button.hbs
@@ -23,7 +23,7 @@
     {{on 'click' this.handleClick}}
   >
     {{#if this.isPending}}
-      <MdIcon::Loading @spin={{true}} class="mx-1" />
+      <Icons::Loading @spin={{true}} class="mx-1" />
     {{else if @icon}}
       <@icon class="mx-1" />
     {{/if}}
diff --git a/app/components/icons/arrow-down.js b/app/components/icons/arrow-down.js
new file mode 100644
index 0000000..52fdbcb
--- /dev/null
+++ b/app/components/icons/arrow-down.js
@@ -0,0 +1 @@
+export { ArrowDown as default } from 'ember-mdi';
diff --git a/app/components/icons/arrow-up-down.js b/app/components/icons/arrow-up-down.js
new file mode 100644
index 0000000..64d458d
--- /dev/null
+++ b/app/components/icons/arrow-up-down.js
@@ -0,0 +1 @@
+export { ArrowUpDown as default } from 'ember-mdi';
diff --git a/app/components/icons/arrow-up.js b/app/components/icons/arrow-up.js
new file mode 100644
index 0000000..0ad1cd3
--- /dev/null
+++ b/app/components/icons/arrow-up.js
@@ -0,0 +1 @@
+export { ArrowUp as default } from 'ember-mdi';
diff --git a/app/components/icons/checkbox-blank-outline.js b/app/components/icons/checkbox-blank-outline.js
new file mode 100644
index 0000000..32f1948
--- /dev/null
+++ b/app/components/icons/checkbox-blank-outline.js
@@ -0,0 +1 @@
+export { CheckboxBlankOutline as default } from 'ember-mdi';
diff --git a/app/components/icons/checkbox-outline.js b/app/components/icons/checkbox-outline.js
new file mode 100644
index 0000000..71d6847
--- /dev/null
+++ b/app/components/icons/checkbox-outline.js
@@ -0,0 +1 @@
+export { CheckboxOutline as default } from 'ember-mdi';
diff --git a/app/components/icons/chevron-left.js b/app/components/icons/chevron-left.js
new file mode 100644
index 0000000..1b7aa6d
--- /dev/null
+++ b/app/components/icons/chevron-left.js
@@ -0,0 +1 @@
+export { ChevronLeft as default } from 'ember-mdi';
diff --git a/app/components/icons/chevron-right.js b/app/components/icons/chevron-right.js
new file mode 100644
index 0000000..0ad25a9
--- /dev/null
+++ b/app/components/icons/chevron-right.js
@@ -0,0 +1 @@
+export { ChevronRight as default } from 'ember-mdi';
diff --git a/app/components/icons/circle-medium.js b/app/components/icons/circle-medium.js
new file mode 100644
index 0000000..3f98b03
--- /dev/null
+++ b/app/components/icons/circle-medium.js
@@ -0,0 +1 @@
+export { CircleMedium as default } from 'ember-mdi';
diff --git a/app/components/icons/github.js b/app/components/icons/github.js
new file mode 100644
index 0000000..a16f803
--- /dev/null
+++ b/app/components/icons/github.js
@@ -0,0 +1 @@
+export { Github as default } from 'ember-mdi';
diff --git a/app/components/icons/help-circle-outline.js b/app/components/icons/help-circle-outline.js
new file mode 100644
index 0000000..77b88ab
--- /dev/null
+++ b/app/components/icons/help-circle-outline.js
@@ -0,0 +1 @@
+export { HelpCircleOutline as default } from 'ember-mdi';
diff --git a/app/components/icons/loading.js b/app/components/icons/loading.js
new file mode 100644
index 0000000..2ff4aa1
--- /dev/null
+++ b/app/components/icons/loading.js
@@ -0,0 +1 @@
+export { Heart as default } from 'ember-mdi';
diff --git a/app/components/icons/logout.js b/app/components/icons/logout.js
new file mode 100644
index 0000000..0d58149
--- /dev/null
+++ b/app/components/icons/logout.js
@@ -0,0 +1 @@
+export { Logout as default } from 'ember-mdi';
diff --git a/app/components/input-checkbox.hbs b/app/components/input-checkbox.hbs
index 632496d..123fe08 100644
--- a/app/components/input-checkbox.hbs
+++ b/app/components/input-checkbox.hbs
@@ -1,8 +1,8 @@
 <label class="flex items-center cursor-pointer" {{on "click" this.onChange}} ...attributes>
   {{#if @checked}}
-    <MdIcon::CheckboxOutline @size={{22}}/>
+    <Icons::CheckboxOutline @size={{22}}/>
   {{else}}
-    <MdIcon::CheckboxBlankOutline @size={{22}}/>
+    <Icons::CheckboxBlankOutline @size={{22}}/>
   {{/if}}
   <span class="ml-1">{{@label}}</span>
 </label>
diff --git a/app/components/pagination.hbs b/app/components/pagination.hbs
index 185f4f4..ea270a2 100644
--- a/app/components/pagination.hbs
+++ b/app/components/pagination.hbs
@@ -16,7 +16,7 @@
           class={{commonClasses}}
           title='Previous page'
         >
-          <MdIcon::ChevronLeft />
+          <Icons::ChevronLeft />
         </LinkTo>
       {{/if}}
       {{#each this.availablePages as |i|}}
@@ -47,7 +47,7 @@
           class={{commonClasses}}
           title='Next page'
         >
-          <MdIcon::ChevronRight />
+          <Icons::ChevronRight />
         </LinkTo>
       {{/if}}
     {{/let}}
diff --git a/app/components/royal-table/column/sorting-icon.hbs b/app/components/royal-table/column/sorting-icon.hbs
index cc1160a..408d67d 100644
--- a/app/components/royal-table/column/sorting-icon.hbs
+++ b/app/components/royal-table/column/sorting-icon.hbs
@@ -1,11 +1,11 @@
 <span ...attributes>
   {{#if @sortable}}
     {{#if @isAscSorted}}
-      <MdIcon::ArrowDown />
+      <Icons::ArrowDown />
     {{else if @isDescSorted}}
-      <MdIcon::ArrowUp />
+      <Icons::ArrowUp />
     {{else}}
-      <MdIcon::ArrowUpDown />
+      <Icons::ArrowUpDown />
     {{/if}}
   {{/if}}
 </span>
diff --git a/app/components/royal-table/row.js b/app/components/royal-table/row.js
index 5bf02c7..0adb0ab 100644
--- a/app/components/royal-table/row.js
+++ b/app/components/royal-table/row.js
@@ -1,3 +1,9 @@
-import Component from '@glimmer/component';
+// import Component from '@glimmer/component';
 
-export default class RoyalTableRowComponent extends Component {}
+// export default class RoyalTableRowComponent extends Component {}
+
+import templateOnly from '@ember/component/template-only';
+
+const RoyalTableRowComponent = templateOnly();
+
+export default RoyalTableRowComponent;
diff --git a/app/controllers/admin.js b/app/controllers/admin.js
index 73401bc..1bf2b08 100644
--- a/app/controllers/admin.js
+++ b/app/controllers/admin.js
@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
-import { CheckboxMarkedCircle, AlertCircle } from 'ember-mdi/icons';
+import { CheckboxMarkedCircle, AlertCircle } from 'ember-mdi';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
diff --git a/app/controllers/admin/indexes/item.js b/app/controllers/admin/indexes/item.js
index c06db91..7706a5c 100644
--- a/app/controllers/admin/indexes/item.js
+++ b/app/controllers/admin/indexes/item.js
@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
-import { DatabaseOutline, CogOutline } from 'ember-mdi/icons';
+import { DatabaseOutline, CogOutline } from 'ember-mdi';
 
 export default class AdminIndexesItemController extends Controller {
   DatabaseOutline = DatabaseOutline;
diff --git a/app/controllers/admin/indexes/item/data.js b/app/controllers/admin/indexes/item/data.js
index 9d27454..a2a33d2 100644
--- a/app/controllers/admin/indexes/item/data.js
+++ b/app/controllers/admin/indexes/item/data.js
@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { Magnify, Table, MapOutline } from 'ember-mdi/icons';
+import { Magnify, Table, MapOutline } from 'ember-mdi';
 
 export default class AdminIndexesItemDataController extends Controller {
   @tracked q = null;
diff --git a/app/controllers/admin/indexes/item/settings.js b/app/controllers/admin/indexes/item/settings.js
index a2285ba..6400794 100644
--- a/app/controllers/admin/indexes/item/settings.js
+++ b/app/controllers/admin/indexes/item/settings.js
@@ -1,8 +1,7 @@
 import Controller from '@ember/controller';
 import { action, get, set } from '@ember/object';
 import arrayEquals from 'meilisearch-admin/utils/array-equals';
-import { ContentSaveOutline, Check, CircleMedium } from 'ember-mdi/icons';
-import { TrackedArray } from 'tracked-built-ins';
+import { ContentSaveOutline, Check, CircleMedium } from 'ember-mdi';
 
 export default class AdminIndexesItemSettingsController extends Controller {
   emptyObj = {};
diff --git a/app/templates/admin.hbs b/app/templates/admin.hbs
index ca999ff..b389257 100644
--- a/app/templates/admin.hbs
+++ b/app/templates/admin.hbs
@@ -18,7 +18,7 @@
               @model={{item}}
               class={{linkClass}}
             >
-              <MdIcon::CircleMedium class='mr-1' />
+              <Icons::CircleMedium class='mr-1' />
               {{capitalize item.uid}}
             </LinkTo>
           {{/each}}
@@ -30,7 +30,7 @@
             target='_blank'
             rel='noopener noreferrer'
           >
-            <MdIcon::HelpCircleOutline class='mr-1' />
+            <Icons::HelpCircleOutline class='mr-1' />
             Documentation
           </a>
           <a
@@ -39,7 +39,7 @@
             target='_blank'
             rel='noopener noreferrer'
           >
-            <MdIcon::Github class='mr-1' />
+            <Icons::Github class='mr-1' />
             MeiliSearch Admin
           </a>
 
@@ -47,7 +47,7 @@
             type='button'
             {{on 'click' this.invalidateSession}}
             class={{linkClass}}
-          ><MdIcon::Logout class='mr-1'/>Logout</button>
+          ><Icons::Logout class='mr-1'/>Logout</button>
         </nav>
       {{/let}}
       <div class='flex flex-row items-center mt-auto px-4 pt-2'>
diff --git a/app/templates/admin/indexes/item/data.hbs b/app/templates/admin/indexes/item/data.hbs
index 5de13e3..e748e67 100644
--- a/app/templates/admin/indexes/item/data.hbs
+++ b/app/templates/admin/indexes/item/data.hbs
@@ -8,10 +8,10 @@
 
 {{!-- <div class='flex items-center mb-4'>
   <div class='flex items-center ml-auto'>
-    <MdIcon::Check class='mr-1' @size='18' />
+    <Icons::Check class='mr-1' @size='18' />
     Hits:
     {{@model.data.estimatedTotalHits}}
-    <MdIcon::ClockOutline class='ml-6 mr-1' @size='18' />
+    <Icons::ClockOutline class='ml-6 mr-1' @size='18' />
     Time spent:
     {{@model.data.processingTimeMs}}
     ms
diff --git a/app/templates/admin/indexes/item/settings.hbs b/app/templates/admin/indexes/item/settings.hbs
index e5ee8f3..06eceb3 100644
--- a/app/templates/admin/indexes/item/settings.hbs
+++ b/app/templates/admin/indexes/item/settings.hbs
@@ -128,9 +128,9 @@ TODO: refactoting
         class="flex items-center px-4 py-2 mb-2 border max-w-md"
         {{sortable-item model=item}}
       >
-        <MdIcon::DragVertical class="mr-2 -ml-2 cursor-move" />
+        <Icons::DragVertical class="mr-2 -ml-2 cursor-move" />
         {{item}}
-        <MdIcon::CloseThick
+        <Icons::CloseThick
           @size="16"
           class="ml-auto cursor-pointer"
           {{on 'click' (fn this.removeRankingRule item)}}
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index ded6a98..6776a6f 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -44,7 +44,7 @@
       fits effortlessly into your apps, websites, and workflow.
     </p>
     <p class='flex items-center justify-center'>
-      <MdIcon::Github @size='20' class='mr-1' />
+      <Icons::Github @size='20' class='mr-1' />
       <a
         href='https://github.com/kaermorchen/meilisearch-admin'
         title='Meilisearch Admin on GitHub'
diff --git a/package.json b/package.json
index 2bcf7e3..7737854 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-mdi": "1.0.0",
+    "ember-mdi": "2.0.0-beta.1",
     "ember-page-title": "^7.0.0",
     "ember-power-select": "^5.0.4",
     "ember-qunit": "^5.1.5",
diff --git a/yarn.lock b/yarn.lock
index 6dc44f0..6647810 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1133,7 +1133,7 @@
     ember-cli-version-checker "^5.1.2"
     semver "^7.3.5"
 
-"@embroider/addon-shim@^1.2.0":
+"@embroider/addon-shim@^1.0.0", "@embroider/addon-shim@^1.2.0", "@embroider/addon-shim@^1.6.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@embroider/addon-shim/-/addon-shim-1.8.3.tgz#2368510b8ce42d50d02cb3289c32e260dfa34bd9"
   integrity sha512-7pyHwzT6ESXc3nZsB8rfnirLkUhQWdvj6CkYH+0MUPN74mX4rslf7pnBqZE/KZkW3uBIaBYvU8fxi0hcKC/Paw==
@@ -1825,11 +1825,6 @@
     tslib "^2.3.1"
     upath "^2.0.1"
 
-"@mdi/svg@^6.5.95":
-  version "6.9.96"
-  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-6.9.96.tgz#e740f59c08cf989444a8f7e765405655aa0eeb9a"
-  integrity sha512-QPW/IHP4mXW2aN8FopcgXaOHBTSjYdGevGvil3HFcCiq1PAfRbVGgiJ7v4qemv0b0fFbfKXpCKgQl3DgOOyXag==
-
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -5883,7 +5878,7 @@ ember-cli-htmlbars@^4.3.1:
     strip-bom "^4.0.0"
     walk-sync "^2.0.2"
 
-ember-cli-htmlbars@^5.0.0, ember-cli-htmlbars@^5.2.0, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1, ember-cli-htmlbars@^5.7.2:
+ember-cli-htmlbars@^5.0.0, ember-cli-htmlbars@^5.2.0, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.7.2.tgz#e0cd2fb3c20d85fe4c3e228e6f0590ee1c645ba8"
   integrity sha512-Uj6R+3TtBV5RZoJY14oZn/sNPnc+UgmC8nb5rI4P3fR/gYoyTFIZSXiIM7zl++IpMoIrocxOrgt+mhonKphgGg==
@@ -6365,17 +6360,14 @@ ember-maybe-in-element@^2.0.3:
     ember-cli-version-checker "^5.1.1"
     ember-in-element-polyfill "^1.0.1"
 
-ember-mdi@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ember-mdi/-/ember-mdi-1.0.0.tgz#6b4eb87f534558e7ec254b0eed5a59593e0bb78b"
-  integrity sha512-SBVP48vtrVAkHHfQwPIkpVL/RduxMrN0RkKEM60WF/HTiwsxyA9ddb2tE+dZ0BtHDGBg/wvdS548ZthLx35XIQ==
+ember-mdi@2.0.0-beta.1:
+  version "2.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/ember-mdi/-/ember-mdi-2.0.0-beta.1.tgz#b566f1c16f573355d3fe9d56d21373fd7c2329e7"
+  integrity sha512-Dy0i/7MyYujqJZI0PTRgJAwLA8miaI0u4gBr6SS3l9xggmuIVdmTxsJU/EnTyAhNGMKNxnBrw1hgAxC1YpNP2Q==
   dependencies:
-    "@mdi/svg" "^6.5.95"
-    broccoli-file-creator "^2.1.1"
-    broccoli-merge-trees "^3.0.2"
-    ember-cli-babel "^7.26.10"
-    ember-cli-htmlbars "^5.7.2"
-    resolve "^1.12.0"
+    "@embroider/addon-shim" "^1.0.0"
+    "@glimmer/component" "^1.1.2"
+    ember-modifier "4.0.0-beta.1"
 
 ember-meta-explorer@^0.2.1:
   version "0.2.1"
@@ -6409,6 +6401,15 @@ ember-modifier-manager-polyfill@^1.2.0:
     ember-cli-version-checker "^2.1.2"
     ember-compatibility-helpers "^1.2.0"
 
+ember-modifier@4.0.0-beta.1:
+  version "4.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-4.0.0-beta.1.tgz#12b791ab744beb6a6caab3b7730f7eeb52a48509"
+  integrity sha512-Mg4NRDCbydlF9hXUzmR9B89GcImA/oDFSK3nFNmy/nQLn5B30zDx8OlL132g9vnnbH/DavlxXwsuv3rDs9g13A==
+  dependencies:
+    "@embroider/addon-shim" "^1.6.0"
+    ember-cli-normalize-entity-name "^1.0.0"
+    ember-cli-string-utils "^1.1.0"
+
 ember-modifier@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-2.1.2.tgz#62d18faedf972dcd9d34f90d5321fbc943d139b1"