Centrally define filled icons

So we don't have to manually pass the option everywhere

app/components/icon.gjs

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { getIcon } from '../utils/icons';
+import { getIcon, isIconFilled } from '../utils/icons';
 
 export default class IconComponent extends Component {
   get svg() {
@@ -25,10 +25,14 @@ export default class IconComponent extends Component {
     return this.args.title || '';
   }
 
+  get isFilled() {
+    return this.args.filled || isIconFilled(this.args.name);
+  }
+
   <template>
     {{#if this.svg}}
       <span
-        class="icon {{if @filled 'icon-filled'}}"
+        class="icon {{if this.isFilled 'icon-filled'}}"
         style={{this.style}}
         title={{this.title}}
       >

app/components/place-details.gjs

@@ -318,7 +318,7 @@ export default class PlaceDetails extends Component {
 
         {{#if this.cuisine}}
           <p class="content-with-icon">
-            <Icon @name="fork-and-knife" @title="Cuisine" @filled={{true}} />
+            <Icon @name="fork-and-knife" @title="Cuisine" />
             <span>
               {{this.cuisine}}
             </span>
@@ -393,7 +393,7 @@ export default class PlaceDetails extends Component {
 
         {{#if this.wikipedia}}
           <p class="content-with-icon">
-            <Icon @name="wikipedia" @title="Wikipedia" @filled={{true}} />
+            <Icon @name="wikipedia" @title="Wikipedia" />
             <span>
               <a
                 href="https://wikipedia.org/wiki/{{this.wikipedia}}"

app/utils/icons.js

@@ -64,6 +64,12 @@ const ICONS = {
   zap,
 };
 
+const FILLED_ICONS = ['fork-and-knife', 'wikipedia'];
+
 export function getIcon(name) {
   return ICONS[name];
 }
+
+export function isIconFilled(name) {
+  return FILLED_ICONS.includes(name);
+}