diff --git a/iconbutton/internal/_shared.scss b/iconbutton/internal/_shared.scss index b1275f5ba5..d668c75e62 100644 --- a/iconbutton/internal/_shared.scss +++ b/iconbutton/internal/_shared.scss @@ -92,8 +92,10 @@ } .link { + display: grid; height: 100%; outline: none; + place-items: center; position: absolute; width: 100%; } diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts index a74f70c3c2..5dc3fff2d1 100644 --- a/iconbutton/internal/icon-button.ts +++ b/iconbutton/internal/icon-button.ts @@ -179,8 +179,7 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter { ${this.renderRipple()} ${!this.selected ? this.renderIcon() : nothing} ${this.selected ? this.renderSelectedIcon() : nothing} - ${this.renderTouchTarget()} - ${this.href && this.renderLink()} + ${this.href ? this.renderLink() : this.renderTouchTarget()} `; } @@ -193,7 +192,9 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter { id="link" href="${this.href}" target="${this.target || nothing}" - aria-label="${ariaLabel || nothing}"> + aria-label="${ariaLabel || nothing}"> + ${this.renderTouchTarget()} + `; }