fix(progress-spinner): spinner with narrower stroke not taking up entire element (#7686)

Fixes spinners that have a stroke smaller than the default not taking up the entire available space.

Fixes #7674.

Author: crisbeto

src/lib/progress-spinner/progress-spinner.spec.ts

@@ -103,12 +103,15 @@ describe('MatProgressSpinner', () => {
   it('should allow a custom stroke width', () => {
     const fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
     const circleElement = fixture.nativeElement.querySelector('circle');
+    const svgElement = fixture.nativeElement.querySelector('svg');
 
     fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
     expect(parseInt(circleElement.style.strokeWidth))
       .toBe(40, 'Expected the custom stroke width to be applied to the circle element.');
+    expect(svgElement.getAttribute('viewBox'))
+      .toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.');
   });
 
   it('should expand the host element if the stroke width is greater than the default', () => {

src/lib/progress-spinner/progress-spinner.ts

@@ -153,7 +153,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 
   /** The view box of the spinner's svg element. */
   get _viewBox() {
-    return `0 0 ${this._elementSize} ${this._elementSize}`;
+    const viewBox = this._circleRadius * 2 + this.strokeWidth;
+    return `0 0 ${viewBox} ${viewBox}`;
   }
 
   /** The stroke circumference of the svg circle. */