From 114bbdefe53a1c4bf629ea76a634736dc8d9209c Mon Sep 17 00:00:00 2001
From: marksie1988 <marksie1988@users.noreply.github.com>
Date: Tue, 5 Sep 2023 15:25:02 +0000
Subject: [PATCH] fix: icons not centered on calendar view

---
 package.json           |  1 +
 src/index.ts           | 13 +++++++------
 src/lib/common.html.ts |  4 ++--
 yarn.lock              |  5 +++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index fef065ac..92c52b4a 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
 		"@material/mwc-select": "^0.27.0",
 		"@material/mwc-switch": "^0.27.0",
 		"@material/mwc-textfield": "^0.27.0",
+		"@mdi/js": "^7.2.96",
 		"@webcomponents/webcomponentsjs": "^2.8.0",
 		"custom-card-helpers": "^1.9.0",
 		"dayjs": "^1.11.9",
diff --git a/src/index.ts b/src/index.ts
index 9df2a883..d1dd3ddf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-help
 import { formatTime } from './helpers/format-time';
 import { groupEventsByDay, getEventMode, getCalendarMode } from './lib/event.func';
 import { styles } from './style';
+import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 
 // DayJS for managing date information
 import dayjs from 'dayjs';
@@ -498,11 +499,11 @@ export class AtomicCalendarRevive extends LitElement {
 			<ha-icon-button
 				class="prev"
 				style="--mdc-icon-color: ${this._config.calDateColor}"
-				icon="mdi:chevron-left"
+				.path=${mdiChevronLeft}
+				.label=${this.hass.localize('ui.common.previous')}
 				@click="${() => this.handleMonthChange(-1)}"
-				title=${this.hass.localize('ui.common.previous')}
+
 			>
-				<ha-icon icon="mdi:chevron-left"></ha-icon>
 			</ha-icon-button>
 			<span class="date" style="text-decoration: none; color: ${this._config.calDateColor};">
 				${this.selectedMonth.format('MMMM')} ${this.selectedMonth.format('YYYY')}
@@ -510,11 +511,11 @@ export class AtomicCalendarRevive extends LitElement {
 			<ha-icon-button
 				class="next"
 				style="--mdc-icon-color: ${this._config.calDateColor}"
-				icon="mdi:chevron-right"
+				.path=${mdiChevronRight}
+				.label=${this.hass.localize('ui.common.next')}
 				@click="${() => this.handleMonthChange(1)}"
-				title=${this.hass.localize('ui.common.next')}
+
 			>
-				<ha-icon icon="mdi:chevron-right"></ha-icon>
 			</ha-icon-button>
 		</div>`;
 	}
diff --git a/src/lib/common.html.ts b/src/lib/common.html.ts
index 0d1ff005..e6f41460 100644
--- a/src/lib/common.html.ts
+++ b/src/lib/common.html.ts
@@ -2,16 +2,16 @@ import dayjs, { Dayjs } from "dayjs";
 import { html } from "lit";
 import { atomicCardConfig } from "../types/config";
 import EventClass from "./event.class";
+import { mdiCalendar } from "@mdi/js";
 
 export function showCalendarLink(config, selectedMonth) {
 	if (!config.disableCalLink) {
 		return html`<div class="calIconSelector">
 				<ha-icon-button
-					icon="mdi:calendar"
+					.path=${mdiCalendar}
           style="--mdc-icon-color: ${config.calDateColor}"
 					onClick="window.open('https://calendar.google.com/calendar/r/month/${selectedMonth.format('YYYY')}/${selectedMonth.format('MM')}/1'), '${config.linkTarget}'"
 				>
-					<ha-icon icon="mdi:calendar"></ha-icon>
 				</ha-icon-button>
 			</div>`;
 	}
diff --git a/yarn.lock b/yarn.lock
index e0042d3a..38f9884b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1927,6 +1927,11 @@
     "@material/theme" "14.0.0-canary.53b3cad2f.0"
     tslib "^2.1.0"
 
+"@mdi/js@^7.2.96":
+  version "7.2.96"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.2.96.tgz#a2a20be740a75e65c8b8b9e12a2b699c06a9208f"
+  integrity sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==
+
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"