diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts index 029c198e87..4b37f2b4e5 100644 --- a/button/lib/link-button.ts +++ b/button/lib/link-button.ts @@ -6,7 +6,7 @@ import {html, TemplateResult} from 'lit'; import {property} from 'lit/decorators.js'; -import {classMap} from 'lit/directives/class-map.js'; +import {ClassInfo, classMap} from 'lit/directives/class-map.js'; import {ifDefined} from 'lit/directives/if-defined.js'; import {Button} from './button.js'; @@ -23,13 +23,30 @@ export abstract class LinkButton extends Button { @property({type: String}) target!: string; + // Note: link buttons cannot have trailing icons. + protected override getRenderClasses(): ClassInfo { + return { + 'md3-button--icon-leading': this.hasIcon, + }; + } + + protected override getIconContainerClasses(): ClassInfo { + return { + 'md3-button__icon--leading': true, + }; + } + /** * @soyTemplate * @soyAttributes buttonAttributes: .md3-button */ protected override render(): TemplateResult { return html` - + - ${this.renderFocusRing()} ${this.renderOverlay()} ${this.renderRipple()} @@ -51,6 +64,5 @@ export abstract class LinkButton extends Button { ${this.renderIcon()} ${this.renderLabel()} `; - // Note: link buttons cannot have trailing icons. } }