To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG.\n To access the inner SVG properties like fill or stroke use ::ng-deep
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\n\n
\n
\n
\n
\n \n
\n
\n
\n.icon-scale-down {{ '{' }}\n // Scale down by 50%\n transform: scale(0.5);\n{{ '}' }}\n
\n
\n
\n
\n
\n \n
\n
\n
\n.icon-scale-up {{ '{' }}\n // Scale up by 500%\n transform: scale(5);\n{{ '}' }}\n
\n
\n
\n\n
Scaling (using viewBox)
\n\n This is an alternative to the CSS scaling method presented above. Scaling via viewBox is less consistent across browsers.\n The pattern depends on your SVG source file, whether it already contains a viewBox or not.\n The following example SVGs with an original size of 100x100px are scaled down by 50%.\n\n
Default sprite path (using the icon sprite service)
\n\n Set the sprite path in your environment.ts and set the default path using forRoot(). Now you\n can invoke the component and simply pass the plain icon name as [src].\n\n
\n Optional: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg')\n Re-render all icon-components afterwards!\n \n \n
\n\n Adding [title]=\"'Orange star'\" will render <title id=\"star_100x100-title\">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers.\n To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img.\n\n
Multicolor Icons
\n\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\n Remember that you will not be able to overwrite styles via CSS.\n\n
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\n\n
\n
\n
\n
\n \n
\n
\n
\n.icon-scale-down {{ '{' }}\n // Scale down by 50%\n transform: scale(0.5);\n{{ '}' }}
\n
\n
\n
\n
\n \n
\n
\n
\n.icon-scale-up {{ '{' }}\n // Scale up by 500%\n transform: scale(5);\n{{ '}' }}\n
\n
\n
\n\n
Scaling (using viewBox)
\n\n This is an alternative to the CSS scaling method presented above. Scaling via viewBox is less consistent across browsers.\n The pattern depends on your SVG source file, whether it already contains a viewBox or not.\n The following example SVGs with an original size of 100x100px are scaled down by 50%.\n\n
\n\n Set the sprite path in your environment.ts and set the default path using forRoot(). Now you\n can invoke the component and simply pass the plain icon name as [src].\n\n
\n Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg')\n Re-render all icon-components afterwards!\n \n \n
\n\n Adding [title]=\"'Orange star'\" will render <title id=\"star_100x100-title\">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers.\n To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img.\n\n
Multicolor Icons (preserving svg properties)
\n\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\n Remember that you will not be able to overwrite styles it's via CSS.\n\n
To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG.\\n To access the inner SVG properties like fill or stroke use ::ng-deep
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n.icon-scale-down {{ '{' }}\\n // Scale down by 50%\\n transform: scale(0.5);\\n{{ '}' }}\\n
\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n.icon-scale-up {{ '{' }}\\n // Scale up by 500%\\n transform: scale(5);\\n{{ '}' }}\\n
\\n
\\n
\\n\\n
Scaling (using viewBox)
\\n\\n This is an alternative to the CSS scaling method presented above. Scaling via viewBox is less consistent across browsers.\\n The pattern depends on your SVG source file, whether it already contains a viewBox or not.\\n The following example SVGs with an original size of 100x100px are scaled down by 50%.\\n\\n
Default sprite path (using the icon sprite service)
\\n\\n Set the sprite path in your environment.ts and set the default path using forRoot(). Now you\\n can invoke the component and simply pass the plain icon name as [src].\\n\\n
\\n Optional: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg')\\n Re-render all icon-components afterwards!\\n \\n \\n
\\n\\n Adding [title]=\\\"'Orange star'\\\" will render <title id=\\\"star_100x100-title\\\">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers.\\n To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img.\\n\\n
Multicolor Icons
\\n\\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\\n Remember that you will not be able to overwrite styles via CSS.\\n\\n
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n.icon-scale-down {{ '{' }}\\n // Scale down by 50%\\n transform: scale(0.5);\\n{{ '}' }}
\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n.icon-scale-up {{ '{' }}\\n // Scale up by 500%\\n transform: scale(5);\\n{{ '}' }}\\n
\\n
\\n
\\n\\n
Scaling (using viewBox)
\\n\\n This is an alternative to the CSS scaling method presented above. Scaling via viewBox is less consistent across browsers.\\n The pattern depends on your SVG source file, whether it already contains a viewBox or not.\\n The following example SVGs with an original size of 100x100px are scaled down by 50%.\\n\\n
\\n\\n Set the sprite path in your environment.ts and set the default path using forRoot(). Now you\\n can invoke the component and simply pass the plain icon name as [src].\\n\\n
\\n Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg')\\n Re-render all icon-components afterwards!\\n \\n \\n
\\n\\n Adding [title]=\\\"'Orange star'\\\" will render <title id=\\\"star_100x100-title\\\">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers.\\n To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img.\\n\\n
Multicolor Icons (preserving svg properties)
\\n\\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\\n Remember that you will not be able to overwrite styles it's via CSS.\\n\\n
\\n\"","module.exports = \"@-webkit-keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n@keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n.icon-examples-1 {\\n color: darkred;\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-1:hover, .icon-examples-1:focus {\\n color: red;\\n -webkit-transform: rotate(12deg);\\n -ms-transform: rotate(12deg);\\n transform: rotate(12deg); }\\n\\n.icon-examples-2 {\\n color: darkgreen;\\n transition: color ease-in-out 0.4s; }\\n\\n.icon-examples-2:hover, .icon-examples-2:focus {\\n color: limegreen; }\\n\\n.icon-examples-3 {\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-3:hover, .icon-examples-3:focus {\\n -webkit-transform: scale(1.1);\\n -ms-transform: scale(1.1);\\n transform: scale(1.1); }\\n\\n.icon-examples-4 {\\n color: darkred; }\\n\\n.icon-examples-4:hover, .icon-examples-4:focus {\\n color: brown; }\\n\\n.icon-examples-5 {\\n color: darkorange;\\n transition: color ease-in-out 0.1s; }\\n\\n.icon-examples-5:hover, .icon-examples-5:focus {\\n color: darkgoldenrod; }\\n\\n.icon-examples-6 {\\n transition: -webkit-transform ease-in-out 0.1s;\\n transition: transform ease-in-out 0.1s;\\n transition: transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-6:hover, .icon-examples-6:focus {\\n -webkit-transform: rotateY(30deg);\\n transform: rotateY(30deg); }\\n\\n.icon-scale-down {\\n -webkit-transform: scale(0.5);\\n -ms-transform: scale(0.5);\\n transform: scale(0.5); }\\n\\n.icon-scale-up {\\n -webkit-transform: scale(5);\\n -ms-transform: scale(5);\\n transform: scale(5); }\\n\\n.container ::ng-deep .styled-icon use {\\n fill: orange;\\n /* evergreen browser symbol styling */\\n stroke: black; }\\n\\n.icon-change-size ::ng-deep svg {\\n transition: all linear 0.2s;\\n -webkit-transform-origin: top center;\\n -ms-transform-origin: top center;\\n transform-origin: top center; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9qYW4uc3V3YXJ0L1Byb2plY3RzL25nLXN2Zy1pY29uLXNwcml0ZS9zcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sbUNBQTBCO1lBQTFCLDJCQUEwQixFQUFBO0VBQ2pDO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sb0NBQTJCO1lBQTNCLDRCQUEyQixFQUFBLEVBQUE7O0FBSnBDO0VBQ0U7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxtQ0FBMEI7WUFBMUIsMkJBQTBCLEVBQUE7RUFDakM7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxvQ0FBMkI7WUFBM0IsNEJBQTJCLEVBQUEsRUFBQTs7QUFHcEM7RUFFRSxlQUFjO0VBQ2QsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFNaEM7O0FBVkQ7SUFPSSxXQUFVO0lBQ1YsaUNBQXdCO1FBQXhCLDZCQUF3QjtZQUF4Qix5QkFBd0IsRUFDekI7O0FBR0g7RUFDRSxpQkFBZ0I7RUFDaEIsbUNBQWtDLEVBS25DOztBQVBEO0lBS0ksaUJBQWdCLEVBQ2pCOztBQUdIO0VBQ0UsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFLaEM7O0FBUEQ7SUFLSSw4QkFBcUI7UUFBckIsMEJBQXFCO1lBQXJCLHNCQUFxQixFQUN0Qjs7QUFHSDtFQUNFLGVBQWMsRUFLZjs7QUFORDtJQUlJLGFBQVksRUFDYjs7QUFHSDtFQUNFLGtCQUFpQjtFQUNqQixtQ0FBa0MsRUFLbkM7O0FBUEQ7SUFLSSxxQkFBb0IsRUFDckI7O0FBR0g7RUFDRSwrQ0FBc0M7RUFBdEMsdUNBQXNDO0VBQXRDLDJFQUFzQztFQUN0Qyx3Q0FBK0I7TUFBL0Isb0NBQStCO1VBQS9CLGdDQUErQixFQUtoQzs7QUFQRDtJQUtJLGtDQUF5QjtZQUF6QiwwQkFBeUIsRUFDMUI7O0FBR0g7RUFFRSw4QkFBcUI7TUFBckIsMEJBQXFCO1VBQXJCLHNCQUFxQixFQUN0Qjs7QUFFRDtFQUVFLDRCQUFtQjtNQUFuQix3QkFBbUI7VUFBbkIsb0JBQW1CLEVBQ3BCOztBQUdEO0VBSVEsYUFBWTtFQUFFLHNDQUFzQztFQUNwRCxjQUFhLEVBQ2Q7O0FBS1A7RUFHTSw0QkFBMkI7RUFDM0IscUNBQTRCO01BQTVCLGlDQUE0QjtVQUE1Qiw2QkFBNEIsRUFDN0IiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIG15bW92ZSB7XG4gIDAlICAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgNTAlICB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgycHgpOyB9XG4gIDc1JSAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgMTAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTsgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0xIHtcbiAgLy8gVXNlIGNvbG9yIHByb3BlcnR5IGZvciBvdmVycmlkaW5nIGRlZmF1bHQgY29sb3IgYW5kIGhvdmVyIGVmZmVjdFxuICBjb2xvcjogZGFya3JlZDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IHJlZDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMmRlZyk7XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtMiB7XG4gIGNvbG9yOiBkYXJrZ3JlZW47XG4gIHRyYW5zaXRpb246IGNvbG9yIGVhc2UtaW4tb3V0IDAuNHM7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IGxpbWVncmVlbjtcbiAgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0zIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTQge1xuICBjb2xvcjogZGFya3JlZDtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICBjb2xvcjogYnJvd247XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtNSB7XG4gIGNvbG9yOiBkYXJrb3JhbmdlO1xuICB0cmFuc2l0aW9uOiBjb2xvciBlYXNlLWluLW91dCAwLjFzO1xuXG4gICY6aG92ZXIsICY6Zm9jdXMge1xuICAgIGNvbG9yOiBkYXJrZ29sZGVucm9kO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTYge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gZWFzZS1pbi1vdXQgMC4xcztcbiAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyIGNlbnRlcjtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMzBkZWcpO1xuICB9XG59XG5cbi5pY29uLXNjYWxlLWRvd24ge1xuICAvLyBTY2FsZSBkb3duIGJ5IDUwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDAuNSk7XG59XG5cbi5pY29uLXNjYWxlLXVwIHtcbiAgLy8gU2NhbGUgdXAgYnkgNTAwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDUpO1xufVxuXG4vLyBBY2Nlc3MgdGhlIFNWRyB2aWEgOjpuZy1kZWVwIHNlbGVjdG9yXG4uY29udGFpbmVyIHtcbiAgOjpuZy1kZWVwIHtcbiAgICAuc3R5bGVkLWljb24ge1xuICAgICAgdXNlIHtcbiAgICAgICAgZmlsbDogb3JhbmdlOyAvKiBldmVyZ3JlZW4gYnJvd3NlciBzeW1ib2wgc3R5bGluZyAqL1xuICAgICAgICBzdHJva2U6IGJsYWNrO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uaWNvbi1jaGFuZ2Utc2l6ZSB7XG4gIDo6bmctZGVlcCB7XG4gICAgc3ZnIHtcbiAgICAgIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4ycztcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */\"","import { Component, OnInit } from '@angular/core';\nimport { IconSpriteService } from 'ng-svg-icon-sprite';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n public icon = 'star_100x100_viewbox';\n public width = '100px';\n public color = 'red';\n public changed = false;\n public changeDone = false;\n\n constructor(\n // Optionally inject the icon sprite service to set path manually\n private iconSpriteService: IconSpriteService\n ) {}\n\n ngOnInit() {}\n\n changeIconPath(src) {\n this.icon = src.split('#')[1] === 'delete_70x70' ? 'star_100x100_viewbox' : 'delete_70x70';\n }\n\n changeIconSizePlus(width) {\n this.width = Number(width.replace('px', '')) + 15 + 'px';\n }\n\n changeIconSizeMinus(width) {\n this.width = Number(width.replace('px', '')) - 15 + 'px';\n }\n\n changeIconColor(color) {\n this.color = color;\n }\n\n // Optionally, change the default sprite path during runtime\n changeDefaultSpritePath() {\n this.changed = true;\n this.iconSpriteService.setPath('assets/sprites-secondary/sprite.svg');\n console.log('changeDefaultSpritePath', this.iconSpriteService.getPath());\n\n setTimeout(() => {\n // Demo purpose: force change detection to re-render\n this.changed = false;\n }, 0);\n }\n}\n","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { IconSpriteModule } from 'ng-svg-icon-sprite';\nimport { environment } from '../environments/environment';\n\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n IconSpriteModule.forRoot({ path: environment.spritePath })\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n","// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false,\n spritePath: 'assets/sprites/sprite.svg'\n};\n\n/*\n * In development mode, for easier debugging, you can ignore zone related error\n * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the\n * below file. Don't forget to comment it out in production mode\n * because it will have a performance impact when errors are thrown\n */\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.log(err));\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 219b8fa..e7a764e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,8 +3,7 @@
SVG-Icon-Sprite Demo
The Basics (reference, width and styling)
-
To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG.
- To access the inner SVG properties like fill or stroke use ::ng-deep
+
To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG.
.icon-scale-down {{ '{' }}
// Scale down by 50%
transform: scale(0.5);
-{{ '}' }}
-
+{{ '}' }}
@@ -99,7 +99,7 @@
Scaling (using viewBox)
-
Default sprite path (using the icon sprite service)
+
Default sprite path
Set the sprite path in your environment.ts and set the default path using forRoot(). Now you
can invoke the component and simply pass the plain icon name as [src].
@@ -123,7 +123,7 @@
Default sprite path (using the icon sprite service)<
-
+
Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg')
Re-render all icon-components afterwards!
@@ -171,17 +171,20 @@
Accessible example (meaningful icon pattern)
Adding [title]="'Orange star'" will render <title id="star_100x100-title">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers.
To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img.
-
Multicolor Icons
+
Multicolor Icons (preserving svg properties)
If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).
- Remember that you will not be able to overwrite styles via CSS.
+ Remember that you will not be able to overwrite styles it's via CSS.