@@ -37,24 +37,25 @@ explicitly set by calling `MatIconRegistry.setDefaultFontSetClass`.
37
37
38
38
### SVG icons
39
39
40
- When an ` mat-icon ` component displays an SVG icon, it does so by directly inlining the SVG content
41
- into the page as a child of the component. (Rather than using an ` <img> ` tag or a ` div ` background
42
- image). This makes it easier to apply CSS styles to SVG icons . For example, the default color of the
40
+ ` < mat-icon> ` displays SVG icons by directly inlining the SVG content into the DOM
41
+ as a child of itself. This approach offers an advantage over an ` <img> ` tag or a CSS
42
+ ` background- image` because it allows styling the SVG with CSS . For example, the default color of the
43
43
SVG content is the CSS
44
44
[ currentColor] ( https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword )
45
45
value. This makes SVG icons by default have the same color as surrounding text, and allows you to
46
46
change the color by setting the ` color ` style on the ` mat-icon ` element.
47
47
48
- In order to prevent XSS vulnerabilities, any SVG URLs and HTML strings passed to the
48
+ In order to guard against XSS vulnerabilities, any SVG URLs and HTML strings passed to the
49
49
` MatIconRegistry ` must be marked as trusted by using Angular's ` DomSanitizer ` service.
50
50
51
- To fetch remote SVG icons, the ` MatIconRegistry ` uses Angular's ` HttpClient ` service. If you haven't
52
- included the [ ` HttpClientModule ` from the ` @angular/common/http ` package] ( https://angular.io/guide/http )
53
- in your module's ` imports ` , you will get an error at runtime.
51
+ ` MatIconRegistry ` fetches all remote SVG icons via Angular's ` HttpClient ` service. If you haven't
52
+ included [ ` HttpClientModule ` from the ` @angular/common/http ` package] ( https://angular.io/guide/http )
53
+ in your ` NgModule ` imports , you will get an error at runtime.
54
54
55
- Note that all SVG icons, registered by URL, are fetched via XmlHttpRequest, and due to the
56
- same-origin policy, their URLs must be on the same domain as the containing page, or their servers
57
- must be configured to allow cross-domain access.
55
+ Note that ` HttpClient ` fetches SVG icons registered with a URL via ` XmlHttpRequest ` , subject to the
56
+ [ Same-origin policy] ( https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy ) . This
57
+ means that icon URLs must have the same origin as the containing page or that the application's
58
+ server must be configured to allow cross-origin requests.
58
59
59
60
#### Named icons
60
61
0 commit comments