Replace plain SF Symbols with Compound counterparts

ElementX/Sources/Other/MapLibre/MapLibreStaticMapView.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import CoreLocation
 import SwiftUI
 
@@ -92,7 +93,7 @@ struct MapLibreStaticMapView<PinAnnotation: View>: View {
             placeholderImage
                 .overlay {
                     VStack(spacing: 0) {
-                        Image(systemName: "arrow.clockwise")
+                        CompoundIcon(\.restart)
                         Text(L10n.actionStaticMapLoad)
                     }
                 }

ElementX/Sources/Screens/HomeScreen/View/Filters/RoomListFiltersView.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct RoomListFiltersView: View {
@@ -63,9 +64,9 @@ struct RoomListFiltersView: View {
                 scrollViewProxy.scrollTo(leadingID, anchor: .leading)
             }
         }, label: {
-            Image(systemName: "xmark.circle.fill")
+            CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyLG)
-                .font(.system(size: 24))
+                .foregroundColor(.compound.iconOnSolidPrimary)
-                .foregroundColor(.compound.bgActionPrimaryRest)
+                .background(Circle().fill(Color.compound.bgActionPrimaryRest))
         })
         .accessibilityLabel(L10n.screenRoomlistClearFilters)
     }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenNewSoundBanner.swift

@@ -32,9 +32,8 @@ struct HomeScreenNewSoundBanner: View {
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
                 Button(action: dismissAction) {
-                    Image(systemName: "xmark")
+                    CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyMD)
                         .foregroundColor(.compound.iconSecondary)
-                        .frame(width: 12, height: 12)
                 }
             }
             

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRecoveryKeyConfirmationBanner.swift

@@ -66,9 +66,8 @@ struct HomeScreenRecoveryKeyConfirmationBanner: View {
                     Button {
                         context.send(viewAction: .skipRecoveryKeyConfirmation)
                     } label: {
-                        Image(systemName: "xmark")
+                        CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyMD)
                             .foregroundColor(.compound.iconSecondary)
-                            .frame(width: 12, height: 12)
                     }
                 }
             }

ElementX/Sources/Screens/RoomChangeRolesScreen/View/RoomChangeRolesScreenSelectedItem.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct RoomChangeRolesScreenSelectedItem: View {
@@ -48,11 +49,9 @@ struct RoomChangeRolesScreenSelectedItem: View {
             .overlay(alignment: .topTrailing) {
                 if let dismissAction {
                     Button(action: dismissAction) {
-                        Image(systemName: "xmark.circle.fill")
+                        CompoundIcon(\.close, size: .xSmall, relativeTo: .compound.bodyMD)
-                            .resizable()
+                            .foregroundColor(.compound.iconOnSolidPrimary)
-                            .scaledFrame(size: 20)
+                            .background(Circle().fill(Color.compound.iconPrimary))
-                            .symbolRenderingMode(.palette)
-                            .foregroundStyle(Color.compound.iconOnSolidPrimary, Color.compound.iconPrimary)
                     }
                     // We will use the accessibility action
                     .accessibilityHidden(true)

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/CollapsibleRoomTimelineView.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct CollapsibleRoomTimelineView: View {
@@ -38,12 +39,12 @@ struct CollapsibleRoomTimelineView: View {
             } label: {
                 HStack(alignment: .center, spacing: 8) {
                     Text(L10n.screenRoomTimelineStateChanges(timelineItem.items.count))
-                    Text(Image(systemName: "chevron.forward"))
+                        .font(.compound.bodySM)
+                    CompoundIcon(\.chevronRight, size: .small, relativeTo: .compound.bodySM)
                         .accessibilityLabel(isExpanded ? L10n.screenRoomGroupedStateEventsReduce : L10n.screenRoomGroupedStateEventsExpand)
                         .rotationEffect(.degrees(isExpanded ? 90 : 0))
                         .animation(.elementDefault, value: isExpanded)
                 }
-                .font(.compound.bodySM)
                 .foregroundColor(.compound.textSecondary)
                 .padding(.horizontal, 36.0)
                 .padding(.vertical, 12.0)

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VideoRoomTimelineView.swift

@@ -63,9 +63,7 @@ struct VideoRoomTimelineView: View {
     }
     
     var playIcon: some View {
-        Image(systemName: "play.circle.fill")
+        CompoundIcon(\.playSolid, size: .custom(50), relativeTo: .compound.headingLG)
-            .resizable()
-            .frame(width: 50, height: 50)
             .background(.ultraThinMaterial, in: Circle())
             .foregroundColor(.white)
     }