Extract icon imports to separate util

So icons can be used from anywhere, e.g. map component JS

app/components/icon.gjs

@@ -1,65 +1,10 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-
+import { getIcon } from '../utils/icons';
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
-import activity from 'feather-icons/dist/icons/activity.svg?raw';
-import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
-import clock from 'feather-icons/dist/icons/clock.svg?raw';
-import edit from 'feather-icons/dist/icons/edit.svg?raw';
-import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
-import globe from 'feather-icons/dist/icons/globe.svg?raw';
-import home from 'feather-icons/dist/icons/home.svg?raw';
-import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
-import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
-import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
-import mail from 'feather-icons/dist/icons/mail.svg?raw';
-import map from 'feather-icons/dist/icons/map.svg?raw';
-import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
-import menu from 'feather-icons/dist/icons/menu.svg?raw';
-import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
-import phone from 'feather-icons/dist/icons/phone.svg?raw';
-import plus from 'feather-icons/dist/icons/plus.svg?raw';
-import server from 'feather-icons/dist/icons/server.svg?raw';
-import search from 'feather-icons/dist/icons/search.svg?raw';
-import settings from 'feather-icons/dist/icons/settings.svg?raw';
-import target from 'feather-icons/dist/icons/target.svg?raw';
-import user from 'feather-icons/dist/icons/user.svg?raw';
-import x from 'feather-icons/dist/icons/x.svg?raw';
-import zap from 'feather-icons/dist/icons/zap.svg?raw';
-import wikipedia from '../icons/wikipedia.svg?raw';
-
-const ICONS = {
-  'arrow-left': arrowLeft,
-  activity,
-  bookmark,
-  clock,
-  edit,
-  facebook,
-  globe,
-  home,
-  instagram,
-  'log-in': logIn,
-  'log-out': logOut,
-  mail,
-  map,
-  'map-pin': mapPin,
-  menu,
-  navigation,
-  phone,
-  plus,
-  server,
-  search,
-  settings,
-  target,
-  user,
-  wikipedia,
-  x,
-  zap,
-};
 
 export default class IconComponent extends Component {
   get svg() {
-    return ICONS[this.args.name];
+    return getIcon(this.args.name);
   }
 
   get size() {

app/components/place-details.gjs

@@ -281,11 +281,7 @@ export default class PlaceDetails extends Component {
         <div class="save-button-wrapper">
           <button
             type="button"
-            class={{if
+            class={{if this.isSaved "btn btn-secondary" "btn btn-outline"}}
-              this.isSaved
-              "btn btn-secondary"
-              "btn btn-outline"
-            }}
             {{on "click" this.toggleLists}}
           >
             <Icon

app/services/storage.js

@@ -141,6 +141,16 @@ export default class StorageService extends Service {
 
       const lists = await this.places.lists.getAll();
       this.lists = lists || [];
+
+      // Decorate with hardcoded icons for default lists (in-memory only)
+      this.lists.forEach((list) => {
+        if (list.id === 'to-go') {
+          list.icon = 'bookmark';
+        } else if (list.id === 'to-do') {
+          list.icon = 'check-square';
+        }
+      });
+
       this.refreshPlaceListAssociations();
     } catch (e) {
       console.error('Failed to load lists:', e);

app/styles/app.css

@@ -1,7 +1,7 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
 :root {
-  --default-list-color: #ffcc33;
+  --default-list-color: #fc3;
 }
 
 html,

app/utils/icons.js

@@ -0,0 +1,61 @@
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
+import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import edit from 'feather-icons/dist/icons/edit.svg?raw';
+import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
+import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
+import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+import mail from 'feather-icons/dist/icons/mail.svg?raw';
+import map from 'feather-icons/dist/icons/map.svg?raw';
+import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
+import menu from 'feather-icons/dist/icons/menu.svg?raw';
+import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import plus from 'feather-icons/dist/icons/plus.svg?raw';
+import server from 'feather-icons/dist/icons/server.svg?raw';
+import search from 'feather-icons/dist/icons/search.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+import target from 'feather-icons/dist/icons/target.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import x from 'feather-icons/dist/icons/x.svg?raw';
+import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import wikipedia from '../icons/wikipedia.svg?raw';
+
+const ICONS = {
+  'arrow-left': arrowLeft,
+  activity,
+  bookmark,
+  'check-square': checkSquare,
+  clock,
+  edit,
+  facebook,
+  globe,
+  home,
+  instagram,
+  'log-in': logIn,
+  'log-out': logOut,
+  mail,
+  map,
+  'map-pin': mapPin,
+  menu,
+  navigation,
+  phone,
+  plus,
+  server,
+  search,
+  settings,
+  target,
+  user,
+  wikipedia,
+  x,
+  zap,
+};
+
+export function getIcon(name) {
+  return ICONS[name];
+}

tests/integration/components/place-details-test.gjs

@@ -9,15 +9,15 @@ module('Integration | Component | place-details', function (hooks) {
 
   class StorageService extends Service {
     lists = [
-      { id: 'to-go', title: 'Want to go', color: '#ff00ff' },
+      { id: 'to-go', title: 'Want to go', color: '#2e9e4f' },
-      { id: 'to-do', title: 'To do', color: '#008000' },
+      { id: 'to-do', title: 'To do', color: '#2a7fff' },
     ];
 
-    isPlaceSaved(id) {
+    isPlaceSaved() {
       return false;
     }
 
-    findPlaceById(id) {
+    findPlaceById() {
       return null;
     }