Skip to content

Commit c19cea4

Browse files
committed
proposed edits
1 parent ab48d37 commit c19cea4

File tree

1 file changed

+11
-10
lines changed

1 file changed

+11
-10
lines changed

src/material/icon/icon.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,24 +37,25 @@ explicitly set by calling `MatIconRegistry.setDefaultFontSetClass`.
3737

3838
### SVG icons
3939

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
4343
SVG content is the CSS
4444
[currentColor](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword)
4545
value. This makes SVG icons by default have the same color as surrounding text, and allows you to
4646
change the color by setting the `color` style on the `mat-icon` element.
4747

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
4949
`MatIconRegistry` must be marked as trusted by using Angular's `DomSanitizer` service.
5050

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.
5454

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.
5859

5960
#### Named icons
6061

0 commit comments

Comments
 (0)