Skip to content

Commit 9f5224c

Browse files
crisbetoannieyw
authored andcommitted
docs: fix SVG icon example on Stackblitz (#21429)
The SVG icon examples 404s when opened on Stackblitz due to an old issue with static assets. These changes switch to using an icon literal so that we don't have to fetch the icon. Fixes #16484. (cherry picked from commit e35cee0)
1 parent 4147cb6 commit 9f5224c

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

src/components-examples/material/icon/icon-svg/icon-svg-example.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import {Component} from '@angular/core';
22
import {DomSanitizer} from '@angular/platform-browser';
33
import {MatIconRegistry} from '@angular/material/icon';
44

5+
const THUMBUP_ICON = `
6+
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
7+
<path d="M0 0h24v24H0z" fill="none"/>
8+
<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.` +
9+
`44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5` +
10+
`1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/>
11+
</svg>
12+
`;
13+
514
/**
615
* @title SVG icons
716
*/
@@ -11,8 +20,9 @@ import {MatIconRegistry} from '@angular/material/icon';
1120
})
1221
export class IconSvgExample {
1322
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
14-
iconRegistry.addSvgIcon(
15-
'thumbs-up',
16-
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
23+
// Note that we provide the icon here as a string literal here due to a limitation in
24+
// Stackblitz. If you want to provide the icon from a URL, you can use:
25+
// `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
26+
iconRegistry.addSvgIconLiteral('thumbs-up', sanitizer.bypassSecurityTrustHtml(THUMBUP_ICON));
1727
}
1828
}

0 commit comments

Comments
 (0)