Enable ha-icons in markdown card (#3458)

* Allow ha-icon in markdown

* Please the linter

* Remove allowSvg

* Remove lasts allow-svgs

src/auth/ha-auth-flow.ts

@@ -106,7 +106,6 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             ? html`
                 <ha-markdown
                   .content=${this._computeStepDescription(step)}
-                  allow-svg
                 ></ha-markdown>
               `
             : html``}

src/components/ha-markdown.js

@@ -3,11 +3,7 @@ import { EventsMixin } from "../mixins/events-mixin";
 
 let loaded = null;
 
-/**
- * White list allowed svg tag.
- * Only put in the tag used in QR code, can be extend in future.
- */
-const svgWhiteList = ["svg", "path"];
+const tagWhiteList = ["svg", "path", "ha-icon"];
 
 /*
  * @appliesMixin EventsMixin
@@ -16,12 +12,8 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
   static get properties() {
     return {
       content: {
-        type: String,
         observer: "_render",
-      },
-      allowSvg: {
-        type: Boolean,
-        value: false,
+        type: String,
       },
     };
   }
@@ -51,7 +43,9 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
   }
 
   _render() {
-    if (this._scriptLoaded === 0 || this._renderScheduled) return;
+    if (this._scriptLoaded === 0 || this._renderScheduled) {
+      return;
+    }
 
     this._renderScheduled = true;
 
@@ -62,14 +56,13 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
       if (this._scriptLoaded === 1) {
         this.innerHTML = this.filterXSS(
           this.marked(this.content, {
+            breaks: true,
             gfm: true,
             tables: true,
-            breaks: true,
           }),
           {
-            onIgnoreTag: this.allowSvg
-              ? (tag, html) => (svgWhiteList.indexOf(tag) >= 0 ? html : null)
-              : null,
+            onIgnoreTag: (tag, html) =>
+              tagWhiteList.indexOf(tag) >= 0 ? html : null,
           }
         );
         this._resize();

src/dialogs/config-flow/step-flow-abort.ts

@@ -37,7 +37,7 @@ class StepFlowAbort extends LitElement {
       <div class="content">
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
       </div>

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -56,7 +56,7 @@ class StepFlowCreateEntry extends LitElement {
       <div class="content">
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <p>Created config for ${step.title}.</p>

src/dialogs/config-flow/step-flow-external.ts

@@ -51,7 +51,7 @@ class StepFlowExternal extends LitElement {
         </p>
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <div class="open-button">

src/dialogs/config-flow/step-flow-form.ts

@@ -79,7 +79,7 @@ class StepFlowForm extends LitElement {
           : ""}
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <ha-form

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -91,7 +91,6 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <ha-markdown
                   content="[[_computeStepDescription(localize, _step)]]"
-                  allow-svg
                 ></ha-markdown>
               </template>