diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts index 88813f5dc5..12d326c287 100644 --- a/progress/demo/stories.ts +++ b/progress/demo/stories.ts @@ -76,9 +76,17 @@ const standardCircular: MaterialStoryInit = { }; const iconButton: MaterialStoryInit = { name: 'Containing an icon-button', - styles: css`.aroundIcon { - --md-circular-progress-size: 48px; - }`, + styles: css` + .around-icon { + position: relative; + } + + md-standard-icon-button { + inset: 0; + margin: auto; + position: absolute; + } + `, render({progress, indeterminate, fourColor}) { const toggle = ({target}: Event) => { const spinner = @@ -87,16 +95,18 @@ const iconButton: MaterialStoryInit = { }; return html` - + + > play_arrow pause - `; + + `; } }; const insideButton: MaterialStoryInit = { diff --git a/progress/lib/circular-progress.ts b/progress/lib/circular-progress.ts index 132da875dd..498ba7d07a 100644 --- a/progress/lib/circular-progress.ts +++ b/progress/lib/circular-progress.ts @@ -55,7 +55,7 @@ export class CircularProgress extends LitElement { this.indeterminate ? this.renderIndeterminateContainer() : this.renderDeterminateContainer()} - `; + `; } // Determinate mode is rendered with an svg so the progress arc can be