diff options
| author | Aldfrith Aern <nockgeneer@gmail.com> | 2015-11-20 00:22:44 +0100 |
|---|---|---|
| committer | Aldfrith Aern <nockgeneer@gmail.com> | 2015-11-20 00:22:44 +0100 |
| commit | efade4b4dd6c4c638c3215379bd4279f3674cfaa (patch) | |
| tree | 5265eda634ea36f89179e2a029e13d6b504c886e | |
| parent | fe79327a9fe8b3e65bed257cd2dac2632eb748ea (diff) | |
fixing the reference id to include _24px
| -rw-r--r-- | index.html | 12 | ||||
| -rw-r--r-- | sprites/README.md | 4 |
2 files changed, 8 insertions, 8 deletions
diff --git a/index.html b/index.html index 6310dc5c84a1..d777a7a35d4b 100644 --- a/index.html +++ b/index.html @@ -328,8 +328,8 @@ <p>To add an icon using symbol sprites, you will need to add an svg element that <code><use></code>es the reference file with a link to the specific icon you want. Since the icons are stored as <code><symbol></code>s, the viewbox is already set up and can be scaled relatively without needing to keep adjacent symbols in mind. Here’s a small example:</p> <div class="icons-preview-code"> - <div class="icons-preview"><svg><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg></div> - <div class="icons-code"><code><svg><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg></code></div> + <div class="icons-preview"><svg><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg></div> + <div class="icons-code"><code><svg><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg></code></div> </div> <h2 id="styling-the-svg-symbol-icons-in-css">Styling the SVG symbol icons in CSS</h2> @@ -342,9 +342,9 @@ <p>Classes and IDs can either be added to the <code><svg></code> tag or the <code><use></code> tag as needed: <div class="icons-preview-code"> <div class="icons-preview"><svg class="material-icons md-svg-48> - <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg> + <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg> <div class="icon-caption">48px</div></div> - <div class="icons-code"><code><svg class="material-icons md-svg-48><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg></code></div> + <div class="icons-code"><code><svg class="material-icons md-svg-48><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg></code></div> </div> <p>Likewise, there's a difference when it comes to changing the icon color. To do so, you will need to target the <code>fill</code> property for the paths that make up the icon:</p> @@ -355,9 +355,9 @@ Thankfully, the fill property cascades and so it can be applied, again, to either the <code><svg></code> or <code><use></code> tag: <div class="icons-preview-code"> <div class="icons-preview"><svg class="material-icons md-svg-orange600> - <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg> + <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg> <div class="icon-caption">Highlighted</div></div> - <div class="icons-code"><code><svg class="material-icons md-svg-orange600><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face"></use></svg></code></div> + <div class="icons-code"><code><svg class="material-icons md-svg-orange600><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg></code></div> </div> <hr> diff --git a/sprites/README.md b/sprites/README.md index d5ea8545b81d..f6ae102b156b 100644 --- a/sprites/README.md +++ b/sprites/README.md @@ -42,7 +42,7 @@ Then reference the id for the icon you need: ```HTML <svg class="svg-24px"> - <use xlink:href="MaterialIcons.svg#ic_face"></use> + <use xlink:href="MaterialIcons.svg#ic_face_24px"></use> </svg> ``` @@ -60,7 +60,7 @@ svg { Then reference the icon: ```HTML -<svg><use xlink:href="MaterialIcons.svg#ic_face"></use></svg> +<svg><use xlink:href="MaterialIcons.svg#ic_face_24px"></use></svg> ``` ### Stacking symbol sprite icons |