Use new icons in the person account menu

aleksis/core/menus.py

@@ -253,7 +253,7 @@ MENUS = {
         {
             "name": _("Stop impersonation"),
             "url": "impersonate-stop",
-            "icon": "stop",
+            "svg_icon": "mdi:stop",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "aleksis.core.util.core_helpers.is_impersonate",
@@ -262,7 +262,7 @@ MENUS = {
         {
             "name": _("Account"),
             "url": "person",
-            "icon": "person",
+            "svg_icon": "mdi:account-outline",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "aleksis.core.util.core_helpers.has_person",
@@ -271,7 +271,7 @@ MENUS = {
         {
             "name": _("Preferences"),
             "url": "preferences_person",
-            "icon": "settings",
+            "svg_icon": "mdi:cog-outline",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "aleksis.core.util.core_helpers.has_person",
@@ -280,7 +280,7 @@ MENUS = {
         {
             "name": _("2FA"),
             "url": "two_factor:profile",
-            "icon": "phonelink_lock",
+            "svg_icon": "mdi:two-factor-authentication",
             "validators": [
                 "menu_generator.validators.is_authenticated",
             ],
@@ -300,7 +300,7 @@ MENUS = {
         {
             "name": _("Third-party accounts"),
             "url": "socialaccount_connections",
-            "icon": "public",
+            "svg_icon": "mdi:earth",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "aleksis.core.util.core_helpers.has_person",
@@ -309,7 +309,7 @@ MENUS = {
         {
             "name": _("Authorized applications"),
             "url": "oauth2_provider:authorized-token-list",
-            "icon": "touch_app",
+            "svg_icon": "mdi:gesture-tap-hold",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "aleksis.core.util.core_helpers.has_person",
@@ -319,7 +319,7 @@ MENUS = {
             "divider": True,
             "name": _("Logout"),
             "url": "logout",
-            "icon": "exit_to_app",
+            "svg_icon": "mdi:logout-variant",
             "validators": ["menu_generator.validators.is_authenticated"],
         },
     ],

aleksis/core/static/public/style.scss

@@ -850,15 +850,15 @@ $person-logo-size: 20vh;
   }
 }
 
-i.material-icons.new-notification {
+a.new-notification {
   position: relative;
   &:after {
     content: "";
     position: absolute;
-    width: 12px;
-    height: 12px;
-    bottom: 27%;
-    right: -4%;
+    width: 10px;
+    height: 10px;
+    bottom: 30%;
+    right: 19%;
     background-color: $secondary-color;
     border-radius: 50%;
   }

aleksis/core/templates/core/base.html

@@ -80,11 +80,10 @@
         <ul class="account-nav">
           {% trans "Notifications" as notifications_text %}
           <li>
-            <a href="{% url "notifications" %}" class="tooltipped" data-position="bottom"
+            <a href="{% url "notifications" %}" data-position="bottom"
+               class="tooltipped {% if request.user.person.unread_notifications_count > 0 %}new-notification{% endif %}"
                data-tooltip="{{ notifications_text }}" aria-label="{{ notifications_text }}">
-              <i class="material-icons {% if request.user.person.unread_notifications_count > 0 %}new-notification{% endif %}">
-                notifications
-              </i>
+              <i class="material-icons iconify" data-icon="mdi:bell-outline"></i>
             </a>
           </li>
           <li>
@@ -113,6 +112,8 @@
         <a href="{{ item.url }}">
           {% if item.icon %}
             <i class="material-icons">{{ item.icon }}</i>
+          {% elif item.svg_icon %}
+            <i class="material-icons iconify" data-icon="{{ item.svg_icon }}"></i>
           {% endif %}
           {{ item.name }}
         </a>