diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 5747dee968..f7f9c62f0e 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -47,10 +47,18 @@ the icon font.
```html
- check
- check
- check
- check
+
+ check
+
+
+ check
+
+
+ check
+
+
+ check
+
```
### Links
@@ -62,7 +70,9 @@ and optionally a
attribute to turn the icon button into a link.
```html
-check
+
+ check
+
```
### Toggle
@@ -77,38 +87,38 @@ adding or removing something from favorites.
```html
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
- close
- check
+ close
+ check
```
@@ -120,7 +130,9 @@ Add an
attribute to buttons whose labels need a more descriptive label.
```html
-search
+
+ search
+
```
### Toggle
@@ -132,8 +144,8 @@ descriptive label when selected.
- close
- check
+ close
+ check
```
@@ -152,7 +164,9 @@ Icon buttons can be grouped together or they can stand alone.
```html
-check
+
+ check
+
```
## Filled Icon Button
@@ -165,7 +179,9 @@ Filled icon buttons have higher visual impact and are best for high emphasis
actions.
```html
-check
+
+ check
+
```
## Filled Tonal Icon Button
@@ -180,7 +196,9 @@ emphasis than an outline would give, such as a secondary action paired with a
high emphasis action.
```html
-check
+
+ check
+
```
## Outlined Icon Button
@@ -194,7 +212,9 @@ button needs more emphasis than a standard icon button but less than a filled or
filled tonal icon button.
```html
-check
+
+ check
+
```
## Theming
@@ -225,7 +245,9 @@ Token | Default value
}
-
+
+ check
+
```
### Filled Icon Button tokens
@@ -253,7 +275,9 @@ Token | Default value
--md-sys-color-primary: #dc362e;
}
-
+
+ check
+
```
### Filled Tonal Icon Button tokens
@@ -278,7 +302,9 @@ Token | Default value
--md-sys-color-secondary-container: #006A6A;
}
-
+
+ check
+
```
### Outlined Icon Button tokens
@@ -305,5 +331,7 @@ Token | Default value
--md-sys-color-outline: #006A6A;
}
-
+
+ check
+
```
diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts
index ab449d61a5..f743f6995f 100644
--- a/iconbutton/icon-button_test.ts
+++ b/iconbutton/icon-button_test.ts
@@ -4,6 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
+import '../icon/icon.js';
import './standard-icon-button.js';
import {html} from 'lit';
@@ -14,18 +15,18 @@ import {IconButtonHarness} from './harness.js';
const ICON_BUTTON_TEMPLATE = html`
- star
+ star
`;
const LINK_ICON_BUTTON_TEMPLATE = html`
- star
+ star
`;
const ICON_BUTTON_TOGGLE_TEMPLATE = html`
- star
- star_border
+ star
+ star_border
`;
diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
index c68118cbed..dcdbcaf58a 100644
--- a/iconbutton/lib/_shared.scss
+++ b/iconbutton/lib/_shared.scss
@@ -60,6 +60,9 @@
}
.icon {
+ height: var(--_icon-size);
+ width: var(--_icon-size);
+
@include icon.theme(
(
size: var(--_icon-size),
diff --git a/iconbutton/lib/icon-button.ts b/iconbutton/lib/icon-button.ts
index 484f8110b0..101aae8b06 100644
--- a/iconbutton/lib/icon-button.ts
+++ b/iconbutton/lib/icon-button.ts
@@ -5,7 +5,6 @@
*/
import '../../focus/focus-ring.js';
-import '../../icon/icon.js';
import '../../ripple/ripple.js';
import {html, LitElement, nothing} from 'lit';
@@ -145,12 +144,12 @@ export class IconButton extends LitElement {
}
private renderIcon() {
- return html``;
+ return html``;
}
private renderSelectedIcon() {
// Use default slot as fallback to not require specifying multiple icons
- return html``;
+ return html``;
}
private renderTouchTarget() {