feat(iconbutton): Add filled link icon button variant.

PiperOrigin-RevId: 448264328

Author: joyzhong

components/icon-button/_filled-icon-button.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-icon-button-theme' show
+  theme;

components/icon-button/filled-link-icon-button.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '../icon/icon.js';
+
+import {html, TemplateResult} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
+
+import {styles} from './lib/filled-styles.css.js';
+import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-link-icon-button': MdFilledLinkIconButton;
+  }
+}
+
+@customElement('md-filled-link-icon-button')
+export class MdFilledLinkIconButton extends LinkIconButton {
+  static override styles = [sharedStyles, styles];
+
+  /** @soyTemplate */
+  protected override renderIcon(icon: string): TemplateResult|string {
+    return icon ? html`<md-icon>${icon}</md-icon>` : '';
+  }
+
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-icon-button--filled': true,
+    };
+  }
+}

components/icon-button/lib/link-icon-button.ts

@@ -6,6 +6,7 @@
 
 import {html, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
 import {IconButton} from './icon-button.js';
@@ -25,7 +26,7 @@ export class LinkIconButton extends IconButton {
   /** @soyTemplate */
   protected override render(): TemplateResult {
     return html`<div
-        class="md3-icon-button"
+        class="md3-icon-button ${classMap(this.getRenderClasses())}"
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
         @pointerdown="${this.handlePointerDown}"