Options: use MD icons in the language editor buttons
This unifies how the buttons look in different OSs, because before we
relied in the characters being rendered by the default sans-serif font
installed in the computer.
Bug: translateselectedtext:12
Change-Id: I70e524f9664a957637f37e81465c9ec435ecc3dd
diff --git a/src/options/elements/framework/ha-svg-icon.ts b/src/options/elements/framework/ha-svg-icon.ts
new file mode 100644
index 0000000..99b18f2
--- /dev/null
+++ b/src/options/elements/framework/ha-svg-icon.ts
@@ -0,0 +1,60 @@
+/*
+ * Written by the Home Assistant frontend authors, and copied here under the
+ * Apache 2.0 license
+ * (https://github.com/home-assistant/frontend/blob/dev/LICENSE.md).
+ *
+ * Slightly adapted.
+ *
+ * Original file:
+ * https://github.com/home-assistant/frontend/blob/4922e575f822c65d81fcde1225cfee5e338ac997/src/components/ha-svg-icon.ts
+ **/
+import {css, CSSResultGroup, LitElement, svg, SVGTemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('ha-svg-icon')
+export class HaSvgIcon extends LitElement {
+ @property() public path?: string;
+
+ @property() public viewBox?: string;
+
+ protected render(): SVGTemplateResult {
+ return svg`
+ <svg
+ viewBox=${this.viewBox || '0 0 24 24'}
+ preserveAspectRatio="xMidYMid meet"
+ focusable="false"
+ role="img"
+ aria-hidden="true"
+ >
+ <g>
+ ${this.path ? svg`<path d=${this.path}></path>` : ''}
+ </g>
+ </svg>`;
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: var(--ha-icon-display, inline-flex);
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ vertical-align: middle;
+ fill: currentcolor;
+ width: var(--mdc-icon-size, 24px);
+ height: var(--mdc-icon-size, 24px);
+ }
+ svg {
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ display: block;
+ }
+ `;
+ }
+}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'ha-svg-icon': HaSvgIcon;
+ }
+}