make the card icons part of the state, so you can allow the user to change them if they want to later.

app/db/src/app/common/card.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { CardItem, OpenData } from '../models/app-state';
 import { BibleReference } from './bible-reference';
+import { Observable } from 'rxjs';
 
 @Component({
   template: '',
@@ -21,6 +22,8 @@ export class CardComponent {
   @Input()
   cardItem: CardItem;
 
+  icon$: Observable<string>;
+
   constructor(protected elementRef: ElementRef) {}
 
   protected copyToClip(text: string, html: string) {

app/db/src/app/constants.ts

@@ -3,3 +3,15 @@ export const PageTitles = {
   Help: 'Help',
   Settings: 'Settings',
 };
+
+export const PageIcons = {
+  Search: 'search',
+  Help: 'help',
+  Settings: 'settings',
+};
+
+export const CardIcons = {
+  Words: 'font_download',
+  Passage: 'menu_book',
+  Strongs: 'article',
+};

app/db/src/app/models/app-state.ts

@@ -1,3 +1,5 @@
+import { MatCardActions } from '@angular/material/card';
+
 export interface AppState {
   readonly savedPages: readonly SavedPage[];
   readonly mainPages: readonly Page[];
@@ -6,6 +8,7 @@ export interface AppState {
   readonly error: Error;
   readonly paragraphs: HashTable<Paragraph>;
   readonly displaySettings: DisplaySettings;
+  readonly cardIcons: CardIcons;
 }
 
 export interface Error {
@@ -14,6 +17,12 @@ export interface Error {
 
 export type Data = BiblePassageResult | StrongsResult | WordLookupResult;
 
+export interface CardIcons {
+  readonly words: string;
+  readonly passage: string;
+  readonly strongs: string;
+}
+
 export interface DisplaySettings {
   readonly showStrongsAsModal: boolean;
   readonly appendCardToBottom: boolean;

app/db/src/app/search/components/passage/passage.component.html

@@ -1,7 +1,7 @@
 <div class="card-title passage-title">
-  <mat-icon aria-hidden="false" aria-label="Bible Passage Icon"
-    >menu_book</mat-icon
-  >
+  <mat-icon aria-hidden="false" aria-label="Bible Passage Icon">{{
+    icon$ | async
+  }}</mat-icon>
   <span *ngIf="ref">{{ ref }}</span>
   <button
     mat-icon-button

app/db/src/app/search/components/passage/passage.component.ts

@@ -35,6 +35,7 @@ export class PassageComponent extends CardComponent implements OnInit {
     private appService: AppService
   ) {
     super(elementRef);
+    this.icon$ = appService.select((state) => state.cardIcons.passage);
   }
 
   ngOnInit(): void {

app/db/src/app/search/components/strongs/strongs.component.html

@@ -1,7 +1,7 @@
 <div class="card-title strongs-title">
-  <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon"
-    >article</mat-icon
-  >
+  <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon">{{
+    icon$ | async
+  }}</mat-icon>
   <span *ngIf="cardItem">{{ cardItem.qry }}</span>
   <button
     mat-icon-button

app/db/src/app/search/components/strongs/strongs.component.ts

@@ -16,6 +16,7 @@ export class StrongsComponent extends CardComponent {
     private appService: AppService
   ) {
     super(elementRef);
+    this.icon$ = appService.select((state) => state.cardIcons.strongs);
   }
 
   copy() {

app/db/src/app/search/components/words/words.component.html

@@ -1,7 +1,7 @@
 <div class="card-title words-title">
-  <mat-icon aria-hidden="false" aria-label="Word Search Entry Icon"
-    >font_download</mat-icon
-  >
+  <mat-icon aria-hidden="false" aria-label="Word Search Entry Icon">{{
+    icon$ | async
+  }}</mat-icon>
   <span *ngIf="cardItem">{{ cardItem.qry }}</span>
   <button
     mat-icon-button

app/db/src/app/search/components/words/words.component.ts

@@ -17,7 +17,7 @@ export class WordsComponent extends CardComponent {
     private appService: AppService
   ) {
     super(elementRef);
-    console.log('rendering word search...');
+    this.icon$ = appService.select((state) => state.cardIcons.words);
   }
 
   copy() {

app/db/src/app/services/app.service.ts

@@ -21,7 +21,7 @@ import {
   IndexResult,
 } from '../models/app-state';
 import { Section, BibleReference } from '../common/bible-reference';
-import { PageTitles } from '../constants';
+import { PageTitles, PageIcons } from '../constants';
 import { createStateService } from '../common/state-service';
 import * as math from 'mathjs';
 
@@ -30,9 +30,9 @@ const initialState: AppState = {
   autocomplete: [],
   savedPages: [],
   mainPages: [
-    { title: PageTitles.Search, icon: 'search' },
-    { title: PageTitles.Settings, icon: 'settings' },
-    { title: PageTitles.Help, icon: 'help' },
+    { title: PageTitles.Search, icon: PageIcons.Search },
+    { title: PageTitles.Settings, icon: PageIcons.Settings },
+    { title: PageTitles.Help, icon: PageIcons.Help },
   ],
   error: null,
   paragraphs: null,
@@ -47,6 +47,11 @@ const initialState: AppState = {
     showParagraphs: true,
     showParagraphHeadings: true,
   },
+  cardIcons: {
+    words: 'font_download',
+    passage: 'menu_book',
+    strongs: 'article',
+  },
 };
 
 type AppAction =