diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c230d49b..0f4418548 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,18 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
-
+## Unreleased
+
+### Fixed
+
+- **BREAKING:VISUAL** `mwc-tab` will now automatically size slotted images. Also
+ slotted image will override icon font.
+
+### Changed
+
+- **BREAKING** `mwc-tab` can now only have slotted content via the
+ `hasImageIcon` flag.
+
## [0.11.1] - 2019-11-26
### Fixed
diff --git a/demos/tabs.html b/demos/tabs.html
index 7d543a38d..c818ce311 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -90,6 +90,41 @@ limitations under the License.
+
Image Icons
+
+
+
+
+
+
+
+
+
+
+
+
With Icons - Stacked
diff --git a/packages/tab/src/mwc-tab-base.ts b/packages/tab/src/mwc-tab-base.ts
index e72b1cc18..ad4a0daf1 100644
--- a/packages/tab/src/mwc-tab-base.ts
+++ b/packages/tab/src/mwc-tab-base.ts
@@ -43,6 +43,8 @@ export class TabBase extends BaseElement {
@property() icon = '';
+ @property({type: Boolean}) hasImageIcon = false;
+
@property({type: Boolean}) isFadingIndicator = false;
@property({type: Boolean}) minWidth = false;
@@ -90,6 +92,27 @@ export class TabBase extends BaseElement {
'mdc-tab--min-width': this.minWidth,
'mdc-tab--stacked': this.stacked,
};
+
+ let iconTemplate = html``;
+ if (this.hasImageIcon || this.icon) {
+ // NOTE: MUST be on same line as spaces will cause vert alignment issues
+ // in IE
+ iconTemplate = html`
+ ${
+ this.icon}`;
+ }
+
+ let labelTemplate = html``;
+ if (this.label) {
+ labelTemplate = html`
+ ${this.label}`;
+ }
+
+ const rippleDirective = ripple({
+ interactionNode: this,
+ unbounded: false,
+ });
+
return html`
`;
}