Use feather icons in sidebar header

app/components/icon.gjs

@@ -10,6 +10,8 @@ import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import x from 'feather-icons/dist/icons/x.svg?raw';
 
 const ICONS = {
   clock,
@@ -20,7 +22,9 @@ const ICONS = {
   navigation,
   phone,
   user,
-  settings
+  settings,
+  'arrow-left': arrowLeft,
+  x
 };
 
 export default class IconComponent extends Component {

app/components/places-sidebar.gjs

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
+import Icon from './icon';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -123,7 +124,7 @@ export default class PlacesSidebar extends Component {
             type="button"
             class="back-btn"
             {{on "click" this.clearSelection}}
-          >←</button>
+          ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
           <h2>Nearby Places</h2>
         {{/if}}
@@ -131,7 +132,7 @@ export default class PlacesSidebar extends Component {
           type="button"
           class="close-btn"
           {{on "click" @onClose}}
-        >×</button>
+        ><Icon @name="x" @size={{20}} @color="#333" /></button>
       </div>
 
       <div class="sidebar-content">