✨ feat: use gtk icons instead of nerdfonts across the shell

also removed hour count from recording widgets

ags/widget/control-center/tiles/Bluetooth.ts

@@ -11,7 +11,10 @@ export const TileBluetooth = () => {
             bind(AstalBluetooth.get_default(), "isConnected")
         ],
         (powered: boolean, isConnected: boolean) => 
-            powered ? ( isConnected ? "󰂱" : "󰂯" ) : "󰂲"
+            powered ? ( isConnected ? 
+                    "bluetooth-active-symbolic"
+                : "bluetooth-symbolic"
+            ) : "bluetooth-disabled-symbolic"
     );
     return Tile({
         title: "Bluetooth",

ags/widget/control-center/tiles/DoNotDisturb.ts

@@ -9,7 +9,7 @@ export const TileDND = Tile({
         (dnd: boolean) => dnd ? tr("control_center.tiles.enabled") : tr("control_center.tiles.disabled")),
     onToggledOff: () => Notifications.getDefault().getNotifd().dontDisturb = false,
     onToggledOn: () => Notifications.getDefault().getNotifd().dontDisturb = true,
-    icon: "󰍶",
+    icon: "minus-circle-filled-symbolic",
     iconSize: 16,
     toggleState: Notifications.getDefault().getNotifd().dontDisturb
 });

ags/widget/control-center/tiles/Network.ts

@@ -33,8 +33,7 @@ export const TileNetwork = () => new Widget.Box({
                     onToggledOn: () => wifi.set_enabled(true),
                     onToggledOff: () => wifi.set_enabled(false),
                     onClickMore: () => TilesPages?.toggle(PageNetwork()),
-                    icon: "󰤨",
-                    iconSize: 16,
+                    icon: "network-wireless-signal-excellent-symbolic",
                     toggleState: bind(wifi, "enabled")
                 } as TileProps)();
 
@@ -57,12 +56,12 @@ export const TileNetwork = () => new Widget.Box({
                     icon: bind(wired, "internet").as((internet: AstalNetwork.Internet) => {
                         switch(internet) {
                             case AstalNetwork.Internet.CONNECTED: 
-                                return '󰛳';
+                                return "network-wired-symbolic";
                             case AstalNetwork.Internet.DISCONNECTED:
-                                return '󰲛';
+                                return "network-wired-disconnected-symbolic";
                         }
 
-                        return "󰛵";
+                        return "network-wired-no-route-symbolic";
                     }),
                     iconSize: 16,
                     toggleState: bind(wired, "internet").as((internet: AstalNetwork.Internet) => 
@@ -78,7 +77,7 @@ export const TileNetwork = () => new Widget.Box({
                 onToggledOn: () => execAsync("nmcli n on"),
                 onToggledOff: () => execAsync("nmcli n off"),
                 onClickMore: () => TilesPages?.toggle(PageNetwork()),
-                icon: "󰲛",
+                icon: "network-wired-disconnected-symbolic",
                 iconSize: 16,
                 toggleState: bind(wired, "internet").as((internet: AstalNetwork.Internet) => 
                     internet === AstalNetwork.Internet.CONNECTING || internet === AstalNetwork.Internet.CONNECTED)

ags/widget/control-center/tiles/NightLight.ts

@@ -10,7 +10,7 @@ import { Widget } from "astal/gtk3";
 export const TileNightLight = () => isInstalled("hyprsunset") ? 
     Tile({
         title: tr("control_center.tiles.night_light.title"),
-        icon: "󰖔",
+        icon: "weather-clear-night-symbolic",
         description: Variable.derive([
             bind(NightLight.getDefault(), "temperature"),
             bind(NightLight.getDefault(), "gamma")

ags/widget/control-center/tiles/Recording.ts

@@ -18,19 +18,16 @@ export const TileRecording = () => {
         const startedAtSeconds = dateTime.to_unix() - Recording.getDefault().startedAt!.to_unix();
         if(startedAtSeconds <= 0) return "00:00";
 
-        const hours = Math.floor(startedAtSeconds / 120);
         const minutes = Math.floor(startedAtSeconds / 60);
         const seconds = Math.floor(startedAtSeconds % 60);
 
-        return `${ hours > 0 ? `${hours < 10 ? `0${hours}` : hours }:` : ""
-            }${ minutes < 10 ? `0${minutes}` : minutes 
-            }:${ seconds < 10 ? `0${seconds}` : seconds }`;
+        return `${ minutes < 10 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${seconds}` : seconds }`;
     });
 
     return Tile({
         title: tr("control_center.tiles.recording.title") || "Screen Recording",
         description: description(),
-        icon: "󰻂",
+        icon: "media-record-symbolic",
         visible: wfRecorderInstalled,
         onDestroy: () => description.drop(),
         onToggledOff: () => Recording.getDefault().stopRecording(),

ags/widget/control-center/tiles/Tile.ts

@@ -65,11 +65,14 @@ export function Tile(props: TileProps): (() => Gtk.Widget) {
                     expand: true,
                     hexpand: true,
                     children: [
-                        new Widget.Label({
-                            className: "icon nf",
-                            label: props.icon || "icon",
-                            css: `label { font-size: ${props.iconSize || 12}px; }`
-                        } as Widget.LabelProps),
+                        new Widget.Icon({
+                            className: "icon",
+                            icon: props.icon,
+                            visible: (props.icon instanceof Binding) ?
+                                props.icon.as(Boolean)
+                            : Boolean(props.icon),
+                            css: `font-size: ${props.iconSize ?? 16}px;`
+                        } as Widget.IconProps),
                         new Widget.Box({
                             className: "text",
                             orientation: Gtk.Orientation.VERTICAL,