diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index e411469252..c18b49c2d4 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -99,6 +99,10 @@ export class HaTextField extends TextFieldBase {
direction: var(--direction);
}
+ .mdc-text-field__icon--trailing {
+ padding: var(--textfield-icon-trailing-padding, 12px);
+ }
+
.mdc-floating-label:not(.mdc-floating-label--float-above) {
text-overflow: ellipsis;
width: inherit;
diff --git a/src/panels/profile/ha-long-lived-access-token-dialog.ts b/src/panels/profile/ha-long-lived-access-token-dialog.ts
index c16cb7b332..7841e4918a 100644
--- a/src/panels/profile/ha-long-lived-access-token-dialog.ts
+++ b/src/panels/profile/ha-long-lived-access-token-dialog.ts
@@ -1,4 +1,5 @@
import "@material/mwc-button";
+import { mdiContentCopy } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -11,9 +12,13 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-textfield";
+import "../../components/ha-icon-button";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
+import type { HaTextField } from "../../components/ha-textfield";
+import { copyToClipboard } from "../../common/util/copy-clipboard";
+import { showToast } from "../../util/toast";
const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
@@ -55,8 +60,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
"ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
)}
type="text"
+ iconTrailing
readOnly
- >
+ >
+