Replace Material Icons with custom drawable resources

android/car-app/src/main/java/com/stadiamaps/ferrostar/car/app/template/icons/InterfaceCarIcons.kt

@@ -3,7 +3,7 @@ package com.stadiamaps.ferrostar.car.app.template.icons
 import android.content.Context
 import androidx.car.app.model.CarIcon
 import androidx.core.graphics.drawable.IconCompat
-import com.stadiamaps.ferrostar.car.app.R
+import com.stadiamaps.ferrostar.ui.shared.R
 
 class InterfaceCarIcons(context: Context) {
   val add: CarIcon =

android/demo-app/build.gradle

@@ -63,7 +63,6 @@ dependencies {
     implementation libs.androidx.compose.ui.graphics
     implementation libs.androidx.compose.ui.tooling
     implementation libs.androidx.compose.material3
-    implementation libs.androidx.compose.material.icon.extended
 
     implementation libs.androidx.car.app
 

android/demo-app/src/main/java/com/stadiamaps/ferrostar/NotNavigatingOverlay.kt

@@ -4,8 +4,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.MyLocation
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -20,6 +18,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.layout.boundsInRoot
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
@@ -80,7 +79,7 @@ fun NotNavigatingOverlay(
               buttonSize = DpSize(48.dp, 48.dp),
           ) {
             Icon(
-                imageVector = Icons.Filled.MyLocation,
+                painter = painterResource(R.drawable.my_location_24px),
                 contentDescription = stringResource(R.string.center_on_my_location),
             )
           }

android/demo-app/src/main/res/drawable/my_location_24px.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <group android:translateY="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm0-80Z"/>
+  </group>
+</vector>

android/gradle/libs.versions.toml

@@ -50,7 +50,6 @@ androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graph
 androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
 androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
 androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
-androidx-compose-material-icon-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
 androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 # Car App Library (for car-app module)
 androidx-car-app = { group = "androidx.car.app", name = "app", version.ref = "androidx-car-app" }

android/ui-compose/build.gradle

@@ -47,7 +47,6 @@ dependencies {
     implementation libs.androidx.compose.ui.graphics
     implementation libs.androidx.compose.ui.tooling.preview
     implementation libs.androidx.compose.material3
-    implementation libs.androidx.compose.material.icon.extended
 
     implementation project(':core')
     implementation project(':ui-formatters')

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/TripProgressView.kt

@@ -11,8 +11,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
@@ -23,6 +21,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -39,6 +38,7 @@ import com.stadiamaps.ferrostar.ui.formatters.DurationFormatter
 import com.stadiamaps.ferrostar.ui.formatters.EstimatedArrivalDateTimeFormatter
 import com.stadiamaps.ferrostar.ui.formatters.LocalizedDistanceFormatter
 import com.stadiamaps.ferrostar.ui.formatters.LocalizedDurationFormatter
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 import kotlin.time.Clock
 import kotlin.time.ExperimentalTime
 import kotlin.time.Instant
@@ -127,7 +127,7 @@ fun TripProgressView(
               contentPadding = PaddingValues(0.dp),
           ) {
             Icon(
-                imageVector = Icons.Filled.Close,
+                painter = painterResource(SharedR.drawable.close_24px),
                 contentDescription = stringResource(id = R.string.end_navigation),
                 tint = theme.exitIconColor,
             )

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/controls/NavigationUIButton.kt

@@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.Icon
@@ -15,11 +13,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.R
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 
 /**
  * A FloatingActionButton styled for use in the navigation UI.
@@ -53,7 +53,10 @@ fun NavigationUIButton(
 fun NavigationUIButtonPreview() {
   Box(Modifier.background(Color.LightGray).padding(16.dp)) {
     NavigationUIButton({}, DpSize(56.dp, 56.dp)) {
-      Icon(Icons.Filled.Close, contentDescription = stringResource(id = R.string.end_navigation))
+      Icon(
+          painterResource(SharedR.drawable.close_24px),
+          contentDescription = stringResource(id = R.string.end_navigation),
+      )
     }
   }
 }

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/controls/NavigationUIZoomButton.kt

@@ -8,9 +8,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.Remove
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.HorizontalDivider
@@ -21,11 +18,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.R
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 
 @Composable
 fun NavigationUIZoomButton(
@@ -48,7 +47,7 @@ fun NavigationUIZoomButton(
         elevation = elevation,
     ) {
       Icon(
-          imageVector = Icons.Filled.Add,
+          painter = painterResource(SharedR.drawable.add_24px),
           contentDescription = stringResource(id = R.string.zoom_in),
       )
     }
@@ -66,7 +65,7 @@ fun NavigationUIZoomButton(
         elevation = elevation,
     ) {
       Icon(
-          imageVector = Icons.Filled.Remove,
+          painter = painterResource(SharedR.drawable.remove_24px),
           contentDescription = stringResource(id = R.string.zoom_out),
       )
     }

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/controls/PillDragHandle.kt

@@ -7,20 +7,20 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.KeyboardArrowUp
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 
 @Composable
 fun PillDragHandle(
@@ -33,7 +33,7 @@ fun PillDragHandle(
   Box(modifier = modifier.fillMaxWidth().height(handleHeight).clickable(onClick = toggle)) {
     if (isExpanded) {
       Icon(
-          Icons.Rounded.KeyboardArrowUp,
+          painterResource(SharedR.drawable.keyboard_arrow_up_24px),
           modifier = Modifier.align(Alignment.Center),
           contentDescription = "Show upcoming maneuvers",
           tint = iconTintColor,

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/gridviews/NavigatingInnerGridView.kt

@@ -5,15 +5,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.VolumeOff
-import androidx.compose.material.icons.automirrored.filled.VolumeUp
-import androidx.compose.material.icons.filled.Navigation
-import androidx.compose.material.icons.filled.Route
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
@@ -27,6 +23,7 @@ import com.stadiamaps.ferrostar.composeui.views.components.speedlimit.SignageSty
 import com.stadiamaps.ferrostar.composeui.views.components.speedlimit.SpeedLimitView
 import com.stadiamaps.ferrostar.core.measurement.MeasurementSpeed
 import com.stadiamaps.ferrostar.core.measurement.MeasurementSpeedUnit
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 
 @Composable
 fun NavigatingInnerGridView(
@@ -67,7 +64,7 @@ fun NavigatingInnerGridView(
                   buttonSize = buttonSize,
               ) {
                 Icon(
-                    Icons.Filled.Navigation,
+                    painterResource(SharedR.drawable.navigation_24px),
                     contentDescription = stringResource(id = R.string.recenter),
                 )
               }
@@ -78,7 +75,7 @@ fun NavigatingInnerGridView(
                   buttonSize = buttonSize,
               ) {
                 Icon(
-                    Icons.Default.Route,
+                    painterResource(SharedR.drawable.route_24px),
                     modifier = Modifier.rotate(90.0f),
                     contentDescription = stringResource(id = R.string.route_overview),
                 )
@@ -93,12 +90,12 @@ fun NavigatingInnerGridView(
             NavigationUIButton(onClick = onClickMute, buttonSize = buttonSize) {
               if (isMuted) {
                 Icon(
-                    Icons.AutoMirrored.Filled.VolumeOff,
+                    painterResource(SharedR.drawable.volume_mute_24px),
                     contentDescription = stringResource(id = R.string.unmute_description),
                 )
               } else {
                 Icon(
-                    Icons.AutoMirrored.Filled.VolumeUp,
+                    painterResource(SharedR.drawable.volume_up_24px),
                     contentDescription = stringResource(id = R.string.mute_description),
                 )
               }

android/ui-compose/src/main/java/com/stadiamaps/ferrostar/composeui/views/components/maneuver/ManeuverInstructionView.kt

@@ -7,22 +7,21 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Build
-import androidx.compose.material.icons.filled.Info
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.theme.DefaultInstructionRowTheme
 import com.stadiamaps.ferrostar.composeui.theme.InstructionRowTheme
 import com.stadiamaps.ferrostar.ui.formatters.DistanceFormatter
 import com.stadiamaps.ferrostar.ui.formatters.LocalizedDistanceFormatter
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 
 /**
  * A generic maneuver instruction view.
@@ -83,7 +82,7 @@ fun PreviewImageManeuverInstructionView() {
       distanceToNextManeuver = 24140.16,
   ) {
     Image(
-        Icons.Filled.Info,
+        painterResource(SharedR.drawable.direction_turn_right),
         contentDescription = null,
         modifier = Modifier.size(24.dp),
         colorFilter = ColorFilter.tint(Color.White),
@@ -100,7 +99,7 @@ fun PreviewRTLManeuverInstructionView() {
       distanceToNextManeuver = 24140.16,
   ) {
     Image(
-        Icons.Filled.Build,
+        painterResource(SharedR.drawable.direction_merge_left),
         contentDescription = null,
         modifier = Modifier.size(24.dp),
         colorFilter = ColorFilter.tint(Color.White),

android/ui-compose/src/test/java/com/stadiamaps/ferrostar/views/NavigationUIButtonTest.kt

@@ -1,15 +1,15 @@
 package com.stadiamaps.ferrostar.views
 
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Adb
 import androidx.compose.material3.Icon
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.views.components.controls.NavigationUIButton
 import com.stadiamaps.ferrostar.composeui.views.components.controls.NavigationUIZoomButton
 import com.stadiamaps.ferrostar.support.WithSnapshotBackground
 import com.stadiamaps.ferrostar.support.paparazziDefault
+import com.stadiamaps.ferrostar.ui.shared.R as SharedR
 import org.junit.Rule
 import org.junit.Test
 
@@ -24,7 +24,7 @@ class NavigationUIButtonTest {
     paparazzi.snapshot {
       WithSnapshotBackground {
         NavigationUIButton(onClick = { /* no action */ }, buttonSize = buttonSize) {
-          Icon(Icons.Filled.Adb, contentDescription = "ADB")
+          Icon(painterResource(SharedR.drawable.close_24px), contentDescription = "Close")
         }
       }
     }
@@ -40,7 +40,7 @@ class NavigationUIButtonTest {
             containerColor = Color.Black,
             contentColor = Color.White,
         ) {
-          Icon(Icons.Filled.Adb, contentDescription = "ADB")
+          Icon(painterResource(SharedR.drawable.close_24px), contentDescription = "Close")
         }
       }
     }

android/ui-shared/src/main/res/drawable/close_24px.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <group android:translateY="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+  </group>
+</vector>

android/ui-shared/src/main/res/drawable/keyboard_arrow_up_24px.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <group android:translateY="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/>
+  </group>
+</vector>