From fcf2f967c30b5ebc3a2787ad0365f44f8b586781 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Thu, 1 Dec 2022 09:50:34 -0800
Subject: [PATCH 1/2] Robustly handle missing icons.

---
 docs/pages/kicon.vue         |  2 ++
 docs/rstIconReplacements.txt |  1 +
 lib/KIcon/iconDefinitions.js |  6 +++++-
 lib/KIcon/index.vue          | 14 ++++++++++----
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue
index c4aa74cb2..f7b2b6800 100644
--- a/docs/pages/kicon.vue
+++ b/docs/pages/kicon.vue
@@ -3,6 +3,8 @@
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
       See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons.
+      If an invalid icon is used, in development Vue.js validation will warn about the error.
+      The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
     </DocsPageSection>
   </DocsPageTemplate>
 
diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
index 6bc778115..c5a808e6f 100644
--- a/docs/rstIconReplacements.txt
+++ b/docs/rstIconReplacements.txt
@@ -8,6 +8,7 @@
 .. |back| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span>`
 .. |bookmarkEmpty| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z"/></svg></span>`
 .. |bookmark| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17 3H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z"/></svg></span>`
+.. |brokenImage| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42l3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4 4-3.99z"/></svg></span>`
 .. |channel| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg></span>`
 .. |checked| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></span>`
 .. |check| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>`
diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index 1dea79c3a..04a66bc7f 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -1,4 +1,4 @@
-import { themeTokens } from '../styles/theme';
+import { themePalette, themeTokens } from '../styles/theme';
 
 /**
  * Defines all icons in the Kolibri Design System
@@ -60,6 +60,10 @@ const KolibriIcons = {
     icon: require('./precompiled-icons/material-icons/error/baseline.vue').default,
     defaultColor: themeTokens().error,
   },
+  brokenImage: {
+    icon: require('./precompiled-icons/material-icons/broken_image/baseline.vue').default,
+    defaultColor: themePalette().grey.v_400,
+  },
 
   // Features and links
   learn: { icon: require('./precompiled-icons/material-icons/school/baseline.vue').default },
diff --git a/lib/KIcon/index.vue b/lib/KIcon/index.vue
index ed0d92118..4ebb1afc6 100644
--- a/lib/KIcon/index.vue
+++ b/lib/KIcon/index.vue
@@ -50,22 +50,28 @@
       },
     },
     computed: {
+      selectedIcon() {
+        if (!KolibriIcons[this.icon]) {
+          return KolibriIcons.brokenImage;
+        }
+        return KolibriIcons[this.icon];
+      },
       computedColor() {
         if (this.disableColor) {
           return null;
         }
         if (this.color) {
           return this.color;
-        } else if (KolibriIcons[this.icon].defaultColor) {
-          return KolibriIcons[this.icon].defaultColor;
+        } else if (this.selectedIcon.defaultColor) {
+          return this.selectedIcon.defaultColor;
         }
         return this.$themeTokens.text;
       },
       rtlFlip() {
-        return KolibriIcons[this.icon].rtlFlip && this.isRtl;
+        return this.selectedIcon.rtlFlip && this.isRtl;
       },
       svgIconComponent() {
-        return KolibriIcons[this.icon].icon;
+        return this.selectedIcon.icon;
       },
     },
   };

From 553b243a04a7771afa052b16481d0c38c0844f50 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 2 Dec 2022 13:05:15 -0800
Subject: [PATCH 2/2] Update docs/pages/kicon.vue

Co-authored-by: Devon Rueckner <indirectlylit@users.noreply.github.com>
---
 docs/pages/kicon.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue
index f7b2b6800..368dadd37 100644
--- a/docs/pages/kicon.vue
+++ b/docs/pages/kicon.vue
@@ -2,9 +2,7 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons.
-      If an invalid icon is used, in development Vue.js validation will warn about the error.
-      The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
+      See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
     </DocsPageSection>
   </DocsPageTemplate>