make symbols on left sidebar wrapped with a pentagon

.config/quickshell/ii/modules/common/widgets/CookieWrappedMaterialSymbol.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import qs.modules.common
+import qs.modules.common.widgets
+
+MaterialCookie {
+    id: root
+    property alias text: symbol.text
+    property alias iconSize: symbol.iconSize
+    property alias font: symbol.font
+    property alias colSymbol: symbol.color
+    property real padding: 6
+
+    color: Appearance.colors.colSecondaryContainer
+    colSymbol: Appearance.colors.colOnSecondaryContainer
+
+    sides: 5
+
+    implicitSize: Math.max(symbol.implicitWidth, symbol.implicitHeight) + padding * 2
+
+    MaterialSymbol {
+        id: symbol
+        anchors.centerIn: parent
+    }
+
+}

.config/quickshell/ii/modules/sidebarLeft/AiChat.qml

@@ -374,10 +374,9 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                     anchors.centerIn: parent
                     spacing: 5
 
-                    MaterialSymbol {
+                    CookieWrappedMaterialSymbol {
                         Layout.alignment: Qt.AlignHCenter
                         iconSize: 60
-                        color: Appearance.m3colors.m3outline
                         text: "neurology"
                     }
                     StyledText {

.config/quickshell/ii/modules/sidebarLeft/Anime.qml

@@ -198,10 +198,9 @@ Item {
                     anchors.centerIn: parent
                     spacing: 5
 
-                    MaterialSymbol {
+                    CookieWrappedMaterialSymbol {
                         Layout.alignment: Qt.AlignHCenter
                         iconSize: 60
-                        color: Appearance.m3colors.m3outline
                         text: "bookmark_heart"
                     }
                     StyledText {