diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss index 1e41ae881afd..8c15c0f211bf 100644 --- a/src/components/button/_button-base.scss +++ b/src/components/button/_button-base.scss @@ -13,6 +13,11 @@ $md-button-margin: 0 !default; $md-button-line-height: 36px !default; $md-button-border-radius: 3px !default; +// Icon Button standards +$md-icon-button-size: 40px !default; +$md-icon-button-border-radius: 50px !default; +$md-icon-button-line-height: 24px !default; + // Fab standards $md-fab-border-radius: 50% !default; $md-fab-size: 56px !default; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 408f3e4acc53..b72335180d31 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -31,6 +31,28 @@ @include md-fab($md-mini-fab-size, $md-mini-fab-padding) } +[md-icon-button] { + @extend %md-button-base; + + min-width: 0; + padding: 0; + + width: $md-icon-button-size; + height: $md-icon-button-size; + + line-height: $md-icon-button-line-height; + border-radius: $md-icon-button-border-radius; + + &.md-button-focus { + background-color: md-color($md-foreground, base, 0.12); + @include md-button-theme('background-color', 0.12); + } + + .md-button-wrapper > * { + vertical-align: middle; + } +} + // Applies a clearer border for high-contrast mode (a11y) @media screen and (-ms-high-contrast: active) { .md-raised-button, .md-fab, .md-mini-fab { diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 84cc2d5fd2e7..7ea362b12c6f 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -16,7 +16,8 @@ import {TimerWrapper} from 'angular2/src/facade/async'; @Component({ - selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-fab]:not(a), [md-mini-fab]:not(a)', + selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-icon-button]:not(a), ' + + '[md-fab]:not(a), [md-mini-fab]:not(a)', inputs: ['color'], host: { '[class.md-button-focus]': 'isKeyboardFocused', @@ -79,7 +80,7 @@ export class MdButton { } @Component({ - selector: 'a[md-button], a[md-raised-button], a[md-fab], a[md-mini-fab]', + selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]', inputs: ['color'], host: { '[class.md-button-focus]': 'isKeyboardFocused', diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html index 828b9b253a85..c9b0b254a228 100644 --- a/src/demo-app/button/button-demo.html +++ b/src/demo-app/button/button-demo.html @@ -45,6 +45,20 @@ +
+ + + + + +
+
isDisabled: {{isDisabled}} @@ -57,5 +71,9 @@ + +