{"id":18051922,"url":"https://github.com/shhdharmen/material-svg-sprites","last_synced_at":"2026-04-22T21:36:34.835Z","repository":{"id":85133119,"uuid":"287931388","full_name":"shhdharmen/material-svg-sprites","owner":"shhdharmen","description":"This repo will help convert Material Icon SVG files into single file of symbols and how you can use it in an Angular application.","archived":false,"fork":false,"pushed_at":"2021-03-11T14:11:34.000Z","size":154,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T07:14:18.323Z","etag":null,"topics":["angular","gulp","material-design","material-icons","sprites","svg","svgstore"],"latest_commit_sha":null,"homepage":"https://dev.to/itnext/material-design-icons-font-vs-svg-and-how-to-use-svg-sprites-in-angular-4pch","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shhdharmen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-16T11:35:34.000Z","updated_at":"2021-03-11T18:21:59.000Z","dependencies_parsed_at":"2023-03-06T14:45:53.905Z","dependency_job_id":null,"html_url":"https://github.com/shhdharmen/material-svg-sprites","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shhdharmen/material-svg-sprites","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fmaterial-svg-sprites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fmaterial-svg-sprites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fmaterial-svg-sprites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fmaterial-svg-sprites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shhdharmen","download_url":"https://codeload.github.com/shhdharmen/material-svg-sprites/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fmaterial-svg-sprites/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262164002,"owners_count":23268779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","gulp","material-design","material-icons","sprites","svg","svgstore"],"created_at":"2024-10-30T22:57:46.338Z","updated_at":"2026-04-22T21:36:34.787Z","avatar_url":"https://github.com/shhdharmen.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material Design Icons: Font vs SVG. And how to use SVG Sprites in Angular? \u003c!-- omit in toc --\u003e\n\n![cover](https://cdn.hashnode.com/res/hashnode/image/upload/v1599159777259/M-Bz6SFMm.png?w=1600\u0026h=840\u0026fit=crop\u0026crop=entropy\u0026auto=compress)\n\n_In this article we will compare usage of [Google's Material Design Icons](http://google.github.io/material-design-icons/), as font and SVG. And we will also see how we can use SVG sprites in an Angular application._\n\n## 📋 Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Material Icons](#material-icons)\n  - [Icon 🔠 font for the web](#icon--font-for-the-web)\n  - [Icon 🖼️ SVGs for the web](#icon-️-svgs-for-the-web)\n- [Font vs SVG](#font-vs-svg)\n  - [📦 Bundle size](#-bundle-size)\n  - [🎭 Performance](#-performance)\n  - [🏆 What to choose](#-what-to-choose)\n- [⛳ Using material icon SVG symbol sprites in Angular](#-using-material-icon-svg-symbol-sprites-in-angular)\n  - [🛠️ Setup](#️-setup)\n  - [⚔️ Coding](#️-coding)\n    - [1. Create `\u003capp-icon\u003e` component](#1-create-app-icon-component)\n    - [2. Modify icon component class](#2-modify-icon-component-class)\n    - [3. Modify icon component template](#3-modify-icon-component-template)\n    - [4. Create *📄 sprites.svg*](#4-create--spritessvg)\n      - [4.1 *📄 gulpfile.js*](#41--gulpfilejs)\n    - [5. `npm` scripts](#5-npm-scripts)\n    - [6. Icon SVGs](#6-icon-svgs)\n    - [7. `\u003capp-root\u003e` component](#7-app-root-component)\n    - [8. Advanced](#8-advanced)\n      - [8.1 `\u003capp-root\u003e` template changes](#81-app-root-template-changes)\n      - [8.2 `\u003capp-icon\u003e` component and template changes](#82-app-icon-component-and-template-changes)\n- [☑️ Conclusion](#️-conclusion)\n- [🙏 Thank you](#-thank-you)\n    - [Credits](#credits)\n\n## Material Icons\n\nMaterial Icons are Google's official icon pack. They are carefully designed following [Material Design Guidelines](https://material.io/design/iconography/system-icons.html#design-principles). It's one of the most widely used icon sets for both, web and mobile applications. It has got around 40k+ ⭐️ on [github](https://github.com/google/material-design-icons).\n\n### Icon 🔠 font for the web\n\nThe easiest way to include the material icons is to use material icon font. All the material icons are packaged into a single font.\n\nYou just need to add single line of HTML:\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\nAnd then you can use them easily, See below example:\n\n```html\n\u003ci class=\"material-icons\"\u003eface\u003c/i\u003e\n```\n\nTo further style them, check this [official guide](https://google.github.io/material-design-icons/#styling-icons-in-material-design).\n\n### Icon 🖼️ SVGs for the web\n\nThe material icons are also provided as SVGs that are suitable for web projects. Individual icons are downloadable from the [material icons library](https://www.google.com/design/icons/).\n\nFor Angular, we can also use `@angular/material`'s [icon component](https://material.angular.io/components/icon/overview), with some additional setup. To summarize, below are the steps which will be needed:\n\n1. Add `@angular/material` by running `ng add @angular/material`\n2. Import `MatIconModule`\n3. Create svg file for the icon under assets\n4. Register the same svg file for it's corresponding icon. For example, you can do below in a component:\n\n```ts\n...\nconstructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {\n    iconRegistry.addSvgIcon(\n        'thumbs-up',\n        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));\n}\n...\n```\n\nand then use it in HTML:\n\n```html\n\u003cmat-icon svgIcon=\"thumbs-up\" aria-hidden=\"false\" aria-label=\"Example thumbs up SVG icon\"\u003e\u003c/mat-icon\u003e\n```\n\nNow, 🔁 repeat steps 3 and 4 for all your icons.\n\n## Font vs SVG\n\nThere are multiple aspects when it comes to selection. We are going to look at the most important ones only:\n\n- Bundle size\n- Performance\n\n### 📦 Bundle size\n\n|      | Size | Can be reduced? |\n| ---- | ---- | --------------- |\n| Font | 42KB | ❌               |\n| SVG  | 62KB | ✅               |\n\n\u003csmall\u003e\u003ca href=\"https://google.github.io/material-design-icons/#icon-font-for-the-web\"\u003esource\u003c/a\u003e\u003c/small\u003e\n\nClearly, font file is winner when it comes to bundle size. But, SVG file size can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites. We will look into it later on.\n\n### 🎭 Performance\n\nNow let's see which one looks better in browser, we will use standard sizes suggested by Google Material Design in [sizing](https://google.github.io/material-design-icons/#sizing), i.e. `18px`, `24px`, `36px` and `48px`.\n\n![Font vs SVG](https://dev-to-uploads.s3.amazonaws.com/i/n9bj1837m35i9cmxg0j4.png)\n\nAs you can see, they both look almost same for `24px`, `36px` and `48px`. Let's try by reducing the size to `18px`:\n\n![Font vs SVG 18px](https://dev-to-uploads.s3.amazonaws.com/i/t9v99wg1d70bcsv36r6a.png)\n\nOk, as you can see for `18px`, font loses its consistency around circular edges while svg still looks good. But, it totally depends on which icons you're using. For instance, look at below:\n\n![Font vs SVG 18px Part 2](https://dev-to-uploads.s3.amazonaws.com/i/ve9ifnegbmd4s93gpm3k.png)\n\n`done_all` and `swap_horiz` don't have round edges, that's why they look fine in font, too.\n\n\u003e  \n\u003e 💻 Code for above preview samples is available [here](https://github.com/shhdharmen/material-svg-sprites/tree/master/preview).\n\u003e  \n\n### 🏆 What to choose\n\nAs you saw, except for some cases, font and svg, both perform well in browsers. But we can improve the bundle size of svg, by compiling only the icons we need in a single file. Let's see how we can do it in Angular.\n\n---\n\n## ⛳ Using material icon SVG symbol sprites in Angular\n\nFirst of all, compiling single file with svg symbol sprite is not related to Angular or any other web framework. It's an opinionated way of achieving cost and performance effective solution to use material icons in your web application. You can read more about it [here](https://github.com/google/material-design-icons/tree/master/sprites).\n\n\u003cimg src=\"https://media.giphy.com/media/l0DAHAQ3Ex4XbL1ni/giphy.gif\" alt=\"Let's get started\"\u003e\n\n### 🛠️ Setup\n\nGo to your favorite 📁 directory and open-up the 👨‍💻 terminal.\n\n1. `npm i -g @angular-cli`\n2. `ng new material-svg-sprites --minimal --interactive=false`\n3. Go to 😴 sleep for sometime and wake-up once above command is done 🏃 running\n4. `cd material-svg-sprites`\n5. `ng serve`\n\nCool. Let's move on to next part.\n\n### ⚔️ Coding\n\n#### 1. Create `\u003capp-icon\u003e` component\n\nOpen-up another terminal at the project directory and:\n\n```bash\nng g c icon --inlineStyle --inlineTemplate=false\n```\n\n\u003e 👉 Ideally, you should create such components in a shared module. For more, head out to [official docs](https://angular.io/guide/styleguide#shared-feature-module).\n\n#### 2. Modify icon component class\n\nLet's add 2 `@Input`s to our component:\n\n```typescript\n// src\\app\\icon\\icon.component.ts\n\nimport { Component, Input, OnInit } from \"@angular/core\";\n\n@Component({\n  selector: \"app-icon\",\n  templateUrl: \"./icon.component.html\",\n  styles: [],\n})\nexport class IconComponent implements OnInit {\n\n  @Input() size = 24; // 👈 added\n  @Input() name = 'face'; // 👈 added\n\n  constructor() {}\n\n  ngOnInit(): void {}\n}\n```\n\nSo, `size` is going to be responsible for size (height and width), of-course 😅. And `name` represents name of the icon, by default we will show `face`, cz it looks nice 😊.\n\n#### 3. Modify icon component template\n\n```html\n\u003c!-- src\\app\\icon\\icon.component.html --\u003e\n\n\u003csvg [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"\u003e\n  \u003cuse [attr.href]=\"'assets/icons/sprites.svg#' + name\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\nLet's see what's going on here...\n\n1. `[ngStyle]`- we are going to use `@Input() size` here to give fixed height and width to our svg\n2. `\u003cuse\u003e`- this element takes nodes from within the SVG document, and duplicates them somewhere else. As you can see in its `href`, we are giving location of the icon which are going to use.\n\nFrom this, you might have understood that *sprites.svg* is going to be our single file with svg symbol sprites. Let's get into that.\n\n#### 4. Create *📄 sprites.svg*\n\nNow, we are not directly going to create sprites file, we are going to automate the flow. To summarize we are going to do below:\n\n1. Download SVG files for the icons which we need from [material icons library](https://material.io/resources/icons). We will keep them at *📁 src/icons/svg*.\n2. Read them and convert them into `\u003csymbol\u003e`\n3. Combine all `\u003csymbol\u003e` to one single file, i.e. *📄 sprites.svg* under *📁 assets* directory\n4. Repeat steps 2 and 3 whenever any new icon is added under *📁 src/icons/svg*\n\nTo automate above flow, we will use **[gulp](https://gulpjs.com/)**. You do not need to have detailed understanding of gulp, just remember that it's a toolkit to automate and enhance our workflow.\n\n##### 4.1 *📄 gulpfile.js*\n\nLet's install some devDependencies first:\n\n```bash\nnpm i -D gulp gulp-svgstore gulp-svgmin path gulp-rename gulp-run-command\n```\n\nNow create *📄 gulpfile.js*:\n\n```javascript\n// gulpfile.js\n\nconst gulp = require(\"gulp\");\nconst svgstore = require(\"gulp-svgstore\");\nconst svgmin = require(\"gulp-svgmin\");\nconst rename = require(\"gulp-rename\");\nconst run = require(\"gulp-run-command\").default;\n\ngulp.task(\"svg-sprite\", () =\u003e {\n  return gulp\n    .src(\"src/icons/svg/*.svg\")\n    .pipe(\n      svgmin(() =\u003e {\n        return {\n          plugins: [\n            {\n              removeViewBox: false,\n            },\n            {\n              removeDimensions: true,\n            },\n          ],\n        };\n      })\n    )\n    .pipe(svgstore())\n    .pipe(rename({ basename: \"sprites\" }))\n    .pipe(gulp.dest(\"src/assets/icons\"));\n});\n\ngulp.task(\"ng-serve\", run(\"ng serve -o\"));\n\ngulp.task(\"ng-build\", run(\"ng build --prod\"));\n\ngulp.task(\"watch\", () =\u003e\n  gulp.watch([\"src/icons/svg/*.svg\"], gulp.series(\"svg-sprite\"))\n);\n\ngulp.task(\n  \"default\",\n  gulp.series(\"svg-sprite\", gulp.parallel(\"ng-serve\", \"watch\"))\n);\n\ngulp.task(\"build\", gulp.series(\"svg-sprite\", \"ng-build\"));\n\n```\n\nWithout much details, below is the flow of default task gulp:\n\n1. Read all `.svg` files from *📁 src/icons/svg*. This is the folder where we will download all of our icon svg files.\n2. Minify them by keeping `viewBox` and removing dimensions. Thanks to [gulp-svgmin](https://www.npmjs.com/package/gulp-svgmin)\n3. Compile all of it in `\u003csymbol\u003e` and merge them into single svg file. With this, it should also keep `id` of `\u003csymbol\u003e` same as filename, which will be useful in our `\u003capp-icon\u003e` component template's `\u003cuse\u003e` tag's `href` attribute. Credit goes to [gulp-svgstore](https://www.npmjs.com/package/gulp-svgstore)\n4. Rename the result file to *📄 sprites.svg* using [gulp-rename](https://www.npmjs.com/package/gulp-rename)\n5. And put that file at *📁 src/assets/icons*\n6. Start Angular app by running command `ng serve -o`\n7. Keep watching for svg files under *📁 src/icons/svg*, if changed repeat steps 1, 2, 3, 4, 5.\n\nThere is also one more task called `build`, which does the same thing as above, except it doesn't keep watching svg files and instead of `ng serve`, it runs `ng build --prod`.\n\n#### 5. `npm` scripts\n\nAs we have created *📄 gulpfile.js* in such a way that it handles running of Angular project, too, we can simply have below script in our *📄 package.json* to run it:\n\n```json\n// package.json\n\n...\n\"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"gulp\", // 👈 modified\n    \"build\": \"gulp build\", // 👈 modified\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n...\n```\n\nNow, we can simply run `npm start` and `npm run build` to run the project in watch mode and build it respectively.\n\n#### 6. Icon SVGs\n\nDownload `face` icon's svg file from [here](https://fonts.gstatic.com/s/i/materialicons/face/v6/24px.svg?download=true) or you can goto [material icons library](https://material.io/resources/icons), find and download `face` icon's svg file.\n\nOnce it's downloaded, rename it to *📄 face.svg*, so that when it gets compiled, `id` of `\u003csymbol\u003e` is `face`. Don't forget to keep it under *📁 src/icons/svg*.\n\n#### 7. `\u003capp-root\u003e` component\n\nWe're almost done. Let's add reference to `\u003capp-icon\u003e` component in `\u003capp-root\u003e`. Simply have below in your template:\n\n```html\n\u003capp-icon\u003e\u003c/app-icon\u003e\n```\n\nAnd 🎉 voila!!! You should see `face` icon's svg in your browser.\n\nAlso try by giving different sizes, like below, it should work fine:\n\n```html\n\u003capp-icon size=\"48\"\u003e\u003c/app-icon\u003e\n```\n\nWith above, we done with all the setup and coding. Now, to use any other icon, for example [`done_all`](https://fonts.gstatic.com/s/i/materialicons/done_all/v6/24px.svg?download=true) icon, simply download it from [material icons library](https://material.io/resources/icons), rename it to some memorable general keyword, put it under *📁 src/icons/svg*. And use it like below:\n\n```html\n\u003capp-icon name=\"done_all\" size=\"36\"\u003e\u003c/app-icon\u003e\n```\n\nGreat 👍!!! If you're with me up-to this, consider I am continuously 👏👏👏 clapping for you.\n\n\u003cimg src=\"https://media.giphy.com/media/HjheuybfwDGnu/giphy.gif\" alt=\"Clapping\"\u003e\n\n#### 8. Advanced\n\nThis is some advanced changes which we will be doing for better alignment and size when icon is placed inline with text, this is totally optional.\n\n##### 8.1 `\u003capp-root\u003e` template changes\n\nFirst, let's see how it looks inline with text. For that, simply change `\u003capp-root\u003e` template:\n\n```html\n\u003cp\u003e\n  Hi, I am a \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e tag with\n  \u003capp-icon size=\"18\"\u003e\u003c/app-icon\u003e icon.\n\u003c/p\u003e\n\u003ch1\u003e\n  Hi, I am a \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e tag with\n  \u003capp-icon size=\"36\"\u003e\u003c/app-icon\u003e icon.\n\u003c/h1\u003e\n```\n\nI have kept icon sizes at **1.125 multiplier with font size**. So by default, in chrome, `\u003cp\u003e` and `\u003ch1\u003e` tags have `16px` and `32px` font size, so that will become `18px` and `36px` for icon size. You can choose your multiplier, but 1.125 works for me.\n\nLet's look at output:\n\n![Icon with inline text](https://dev-to-uploads.s3.amazonaws.com/i/hluwqd1brgsq2w9g3wje.png)\n\nAs you can see, we need to really work on alignment. Let's do that.\n\n##### 8.2 `\u003capp-icon\u003e` component and template changes\n\nModify `\u003capp-icon\u003e` component like below:\n\n```typescript\n// src\\app\\icon\\icon.component.ts\n\n...\nexport class IconComponent implements OnInit {\n private readonly SIZE_MULTIPLIER = 1.125; // 👈 you can change this as per your need\n  _size = 24;\n  _top = 0;\n  @Input() name = \"face\";\n  @Input()\n  set size(size: \"inherit\" | number) {\n    if (size === \"inherit\") {\n      const parentElement = this.elRef.nativeElement.parentElement;\n      this._size = Math.ceil(\n        parseFloat(\n          window.getComputedStyle(parentElement).getPropertyValue(\"font-size\")\n        ) * this.SIZE_MULTIPLIER\n      );\n      this._top = -(this._size / Math.ceil(14.22 * this.SIZE_MULTIPLIER));\n    } else if (isNaN(size)) {\n      throw new Error('size must be a number or \"inherit\"');\n    } else {\n      this._size = size;\n    }\n  }\n  constructor(private elRef: ElementRef) {}\n  ...\n}\n```\n\n```html\n\u003c!-- src\\app\\icon\\icon.component.html --\u003e\n\n\u003csvg\n  [ngStyle]=\"{\n    height: _size + 'px',\n    width: _size + 'px',\n    top: _top + 'px'\n  }\"\n  style=\"display: inline-block; vertical-align: top; position: relative;\"\n\u003e\n  \u003cuse [attr.href]=\"'assets/icons/sprites.svg#' + name\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\nTo summarize, below is what we did:\n\n1. Instead of directly setting `size`, we introduced a property `_size` and used `setter`. So based on `@Input() size`, `_size` will be calculated.\n2. `_top` - this will help us to align icon properly.\n3. `_size` setter - now, we are also accepting `inherit` as value. If user has provides `inherit` as value for `@Input() size`, we are getting icon's `parentElement`'s `font-size` using `window.getComputedStyle`. And we are multiplying it with our multiplier, i.e. `SIZE_MULTIPLIER = 1.125`. Lastly, `_top` is also calculated. Everything is simple maths, you can play around and make changes as per your need.\n4. template - we have made some style changes so that it looks proper. Now, these style changes are really an opinionated way. You can select your own way, maybe make `\u003csvg\u003e`'s style `position: absolute;top: 50%;height: \u003cHEIGHT\u003e;margin-top: -\u003cHEIGHT/2\u003e` and wrap it inside an element with `position: relative`. You can read more about `vertical-align` at [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align).\n\n\u003e  \n\u003e 👉 You can try to have `fill-color` set based on parent element and/or input.\n\u003e  \n\nNow, let's look at the output in browser again:\n\n![Icon with inline text updated](https://dev-to-uploads.s3.amazonaws.com/i/3nfmu9lvz4v8gn5idwnm.png)\n\nAlright, now it looks good.\n\n\u003e  \n\u003e 💻 Code for Angular application is present at [github/material-svg-sprites](https://github.com/shhdharmen/material-svg-sprites)\n\u003e  \n\n\u003chttps://github.com/shhdharmen/material-svg-sprites\u003e\n\n---\n\n## ☑️ Conclusion\n\n1. We learned what Google Material Design Icons are\n2. We also saw 2 ways of adding icons: Font and SVG\n3. We saw how we can create single svg sprite file of symbols using gulp in an Angular application\n4. And at last, we also took a look at how we can align the icon for inline text\n\n## 🙏 Thank you\n\nYou guys have been great readers. I really appreciate that you've taken some time to read this article. Let me know your thoughts and feedbacks in the comments section.\n\nYou can follow me on 🐦 twitter [@shhdharmen](https://twitter.com/shhdharmen). Don't be shy even just say hi 👋!\n\nAnd yes, always believe in yourself.\n\n\u003cimg src=\"https://source.unsplash.com/vnpTRdmtQ30\" alt=\"breathe neon on green leaves\"\u003e\n\n#### Credits\n\n\u003csmall\u003e\u003cspan\u003eFooter Photo by \u003ca href=\"https://unsplash.com/@nofilter_noglory?utm_source=unsplash\u0026amp;utm_medium=referral\u0026amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTim Goedhart\u003c/a\u003e on \u003ca href=\"https://unsplash.com/s/photos/believe-in-yourself?utm_source=unsplash\u0026amp;utm_medium=referral\u0026amp;utm_content=creditCopyText\"\u003eUnsplash\u003c/a\u003e\u003c/span\u003e\n\u003cspan\u003e\n  \u003c/small\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fmaterial-svg-sprites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshhdharmen%2Fmaterial-svg-sprites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fmaterial-svg-sprites/lists"}