diff --git a/package-lock.json b/package-lock.json
index 38422c0..baf8eb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,6 +64,7 @@
         "@koumoul/vjsf": "2.22.1",
         "@koumoul/vue-multianalytics": "^1.11.4",
         "@mdi/font": "^7.0.96",
+        "@mdi/js": "^7.4.47",
         "@nuxtjs/google-fonts": "^1.3.0",
         "@nuxtjs/vuetify": "^1.12.3",
         "clean-modules": "^2.0.4",
@@ -4597,6 +4598,14 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/@koumoul/vjsf/node_modules/@mdi/js": {
+      "version": "6.9.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.9.96.tgz",
+      "integrity": "sha512-rK0/vLFaiItYS2W7uVmaKPKnhNQE4XVkylpk5njtVwENnp8elwY5uRL6qvdj2esuvUHG7DwygE4Qu3eKxxuJiQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true
+    },
     "node_modules/@koumoul/vjsf/node_modules/ajv": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
@@ -4644,11 +4653,11 @@
       "dev": true
     },
     "node_modules/@mdi/js": {
-      "version": "6.5.95",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.5.95.tgz",
-      "integrity": "sha512-x/bwEoAGP+Mo10Dfk5audNIPi7Yz8ZBrILcbXLW3ShOI/njpgodzpgpC2WYK3D2ZSC392peRRemIFb/JsyzzYQ==",
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
       "dev": true,
-      "optional": true
+      "license": "Apache-2.0"
     },
     "node_modules/@mongodb-js/saslprep": {
       "version": "1.1.0",
@@ -28257,6 +28266,13 @@
           "dev": true,
           "optional": true
         },
+        "@mdi/js": {
+          "version": "6.9.96",
+          "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.9.96.tgz",
+          "integrity": "sha512-rK0/vLFaiItYS2W7uVmaKPKnhNQE4XVkylpk5njtVwENnp8elwY5uRL6qvdj2esuvUHG7DwygE4Qu3eKxxuJiQ==",
+          "dev": true,
+          "optional": true
+        },
         "ajv": {
           "version": "8.11.0",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
@@ -28300,11 +28316,10 @@
       "dev": true
     },
     "@mdi/js": {
-      "version": "6.5.95",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.5.95.tgz",
-      "integrity": "sha512-x/bwEoAGP+Mo10Dfk5audNIPi7Yz8ZBrILcbXLW3ShOI/njpgodzpgpC2WYK3D2ZSC392peRRemIFb/JsyzzYQ==",
-      "dev": true,
-      "optional": true
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+      "dev": true
     },
     "@mongodb-js/saslprep": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index 21e713a..73f3be3 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "@koumoul/vjsf": "2.22.1",
     "@koumoul/vue-multianalytics": "^1.11.4",
     "@mdi/font": "^7.0.96",
+    "@mdi/js": "^7.4.47",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/vuetify": "^1.12.3",
     "clean-modules": "^2.0.4",
diff --git a/public/components/layout/layout-personal-menu.vue b/public/components/layout/layout-personal-menu.vue
index e7e9322..83284a9 100644
--- a/public/components/layout/layout-personal-menu.vue
+++ b/public/components/layout/layout-personal-menu.vue
@@ -14,7 +14,7 @@
           aria-label="symbole de connexion"
           aria-hidden="false"
         >
-          mdi-account-circle
+          {{ mdiAccountCircle }}
         </v-icon>
       </v-btn>
       <v-btn
@@ -92,9 +92,16 @@
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
+// better to load svg for semantic icons important for accessbility
+import { mdiAccountCircle } from '@mdi/js'
 
 export default {
   props: ['loginHref', 'backgroundDark'],
+  data () {
+    return {
+      mdiAccountCircle
+    }
+  },
   computed: {
     ...mapState(['config', 'textDark', 'userPartners']),
     ...mapState('session', ['user']),
diff --git a/public/components/notifications-queue.vue b/public/components/notifications-queue.vue
index b867016..3d2d2b0 100644
--- a/public/components/notifications-queue.vue
+++ b/public/components/notifications-queue.vue
@@ -26,7 +26,7 @@
             aria-label="symbole de notification"
             aria-hidden="false"
           >
-            mdi-bell
+            {{ mdiBell }}
           </v-icon>
         </v-badge>
       </v-btn>
@@ -86,6 +86,8 @@
 <script>
 import { mapState } from 'vuex'
 import eventBus from '~/event-bus'
+import { mdiBelll } from '@mdi/js'
+
 /* let sound
 if (!process.server) {
   sound = new Audio(require('@/assets/sounds/Information_Block.ogg'))
@@ -98,7 +100,8 @@ export default {
     countNew: null,
     notifications: null,
     loading: false,
-    size: 10
+    size: 10,
+    mdiBelll
   }),
   computed: {
     ...mapState(['textDark', 'config']),