diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ac72b8a4..0f712fe30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- CSS styling options to `mwc-tab`
- `active` attribute to `mwc-tab` when (de)activated
+### 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 6eb6e4449..57975c4ed 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;
@@ -97,6 +99,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`
`;
}