├── src ├── assets │ ├── .gitkeep │ ├── resources │ │ ├── mdil.png │ │ ├── Roboto.woff2 │ │ ├── mdil.design │ │ ├── nova.design │ │ ├── codepen.design │ │ ├── grid-96.design │ │ ├── icongrid.design │ │ ├── home-scss.design │ │ ├── icon-grid.design │ │ ├── home-variants.design │ │ ├── icon-grid-240.design │ │ ├── placeholder.design │ │ ├── systemicons.design │ │ ├── home-opensource.design │ │ ├── mdi-preview-nodejs.png │ │ ├── github-preview-blank.png │ │ ├── home-documentation.design │ │ ├── github-preview-blank-draft.png │ │ ├── github-preview-overlay-wip.png │ │ ├── github-preview-overlay-link.png │ │ ├── github-preview-overlay-download.png │ │ ├── xamarin-android-file-location.png │ │ ├── xamarin-ios-file-location-small.png │ │ ├── xamarin-uwp-file-location-small.png │ │ └── xamarin-fontfamily-and-code-small.png │ └── docs │ │ ├── angularjs │ │ └── mdi.js │ │ └── bootstrap │ │ └── helper.css ├── api │ ├── admin │ │ ├── mock.get.json │ │ ├── icon │ │ │ ├── tag │ │ │ │ └── mock.post.json │ │ │ ├── E76EC23F-AB71-49B3-9173-841544527A20 │ │ │ │ ├── alias │ │ │ │ │ └── uuid1 │ │ │ │ │ │ └── mock.delete.json │ │ │ │ ├── tag │ │ │ │ │ └── uuid1 │ │ │ │ │ │ └── mock.delete.json │ │ │ │ └── mock.get.json │ │ │ ├── mock.post.json │ │ │ ├── 57DD596E-AFB6-46D2-8415-2DED40839B11 │ │ │ │ └── mock.get.json │ │ │ ├── rename │ │ │ │ └── mock.post.json │ │ │ ├── base │ │ │ │ └── mock.post.json │ │ │ ├── style │ │ │ │ └── mock.post.json │ │ │ └── 17CE7627-5016-43F9-B42D-AFAAFA0A0564 │ │ │ │ └── mock.get.json │ │ ├── font │ │ │ ├── D051337E-BC7E-11E5-A4E9-842B2B6CFE1B │ │ │ │ └── next │ │ │ │ │ └── mock.get.json │ │ │ └── version │ │ │ │ └── 8c70e3fd-a857-11e9-aab8-94188269ec50 │ │ │ │ ├── generate │ │ │ │ └── svg │ │ │ │ │ └── cache │ │ │ │ │ └── mock.get.json │ │ │ │ └── mock.get.json │ │ ├── tag │ │ │ └── mock.get.json │ │ ├── package │ │ │ ├── mock.get.json │ │ │ └── 38EF63D0-4744-11E4-B3CF-842B2B6CFE1B │ │ │ │ └── mock.get.json │ │ └── alias │ │ │ └── mock.post.json │ ├── login │ │ └── meta.get.json │ ├── package │ │ └── 38EF63D0-4744-11E4-B3CF-842B2B6CFE1B │ │ │ ├── name │ │ │ ├── account │ │ │ │ └── mock.get.json │ │ │ ├── home │ │ │ │ └── mock.get.json │ │ │ └── accounts │ │ │ │ └── mock.get.json │ │ │ └── 4F013652-22DE-48CF-886B-A0FB995E8B41 │ │ │ └── mock.get.json │ ├── init │ │ └── mock.get.json │ ├── icon │ │ ├── 4F013652-22DE-48CF-886B-A0FB995E8B41 │ │ │ └── mock.get.json │ │ └── E76EC23F-AB71-49B3-9173-841544527A20 │ │ │ └── mock.get.json │ └── style │ │ └── 38EF63D0-4744-11E4-B3CF-842B2B6CFE1B │ │ └── mock.get.json ├── site │ ├── pageNotFound │ │ ├── pageNotFound.css │ │ ├── pageNotFound.html │ │ └── pageNotFound.ts │ ├── navDocs │ │ ├── navDocs.html │ │ ├── navDocs.css │ │ └── navDocs.ts │ ├── navMenu │ │ ├── navMenu.html │ │ ├── navMenu.css │ │ └── navMenu.ts │ ├── carbon │ │ ├── carbon.html │ │ ├── carbon.css │ │ └── carbon.ts │ ├── pageIcons │ │ └── pageIcons.css │ ├── pageHistory │ │ └── pageHistory.html │ ├── pageView │ │ └── pageView.html │ ├── pageHome │ │ └── pageHome.ts │ ├── pageGithub │ │ └── utils.ts │ └── pageContributors │ │ └── pageContributors.ts ├── app │ ├── admin │ │ ├── basePage │ │ │ ├── basePage.component.scss │ │ │ ├── basePage.component.html │ │ │ └── basePage.component.ts │ │ ├── indexPage │ │ │ ├── indexPage.component.scss │ │ │ └── indexPage.component.ts │ │ ├── sheetPage │ │ │ └── sheetPage.component.scss │ │ ├── indexeddbPage │ │ │ └── indexeddbPage.component.scss │ │ ├── tagPage │ │ │ └── tagPage.component.scss │ │ ├── aliasPage │ │ │ └── aliasPage.component.scss │ │ ├── profilePage │ │ │ └── profilePage.component.scss │ │ ├── renamePage │ │ │ ├── renamePage.component.scss │ │ │ └── renamePage.component.html │ │ ├── loginPage │ │ │ ├── loginPage.component.ts │ │ │ └── loginPage.component.scss │ │ ├── releasePage │ │ │ └── releasePage.component.scss │ │ └── services │ │ │ └── login.service.ts │ ├── downloadPage │ │ ├── downloadPage.component.scss │ │ ├── downloadPage.component.html │ │ └── downloadPage.component.ts │ ├── notFoundPage │ │ ├── notFoundPage.component.scss │ │ ├── notFoundPage.component.html │ │ └── notFoundPage.component.ts │ ├── githubPage │ │ └── githubPage.component.scss │ ├── shared │ │ ├── modificationTable │ │ │ └── modificationTable.component.scss │ │ ├── delay.ts │ │ ├── enums │ │ │ ├── downloadType.enum.ts │ │ │ ├── packageType.enum.ts │ │ │ └── modificationType.enum.ts │ │ ├── carbon │ │ │ ├── carbon.component.html │ │ │ ├── carbon.component.ts │ │ │ └── carbon.component.scss │ │ ├── iconPreview │ │ │ ├── iconPreview.component.html │ │ │ ├── iconPreview.component.scss │ │ │ └── iconPreview.component.ts │ │ ├── footer │ │ │ ├── footer.component.scss │ │ │ ├── footer.component.ts │ │ │ └── footer.component.html │ │ ├── icon │ │ │ └── icon.component.html │ │ ├── iconViewer │ │ │ ├── iconViewer.component.html │ │ │ ├── iconViewer.component.ts │ │ │ └── iconViewer.component.scss │ │ ├── models │ │ │ ├── alias.model.ts │ │ │ ├── style.model.ts │ │ │ ├── tag.model.ts │ │ │ ├── fontVersion.model.ts │ │ │ ├── package.model.ts │ │ │ ├── issue.model.ts │ │ │ ├── font.model.ts │ │ │ ├── downloadIcon.model.ts │ │ │ ├── user.model.ts │ │ │ └── modification.model.ts │ │ ├── banner │ │ │ ├── banner.component.html │ │ │ ├── banner.component.ts │ │ │ └── banner.component.scss │ │ ├── iconSearch │ │ │ ├── iconSearch.component.scss │ │ │ └── iconSearch.component.html │ │ ├── contextMenu │ │ │ └── contextMenu.component.ts │ │ ├── confirmModal │ │ │ ├── confirmModal.component.ts │ │ │ └── confirmModal.component.html │ │ ├── header │ │ │ └── header.component.ts │ │ ├── assignAliasModal │ │ │ ├── assignAliasModal.component.html │ │ │ └── assignAliasModal.component.ts │ │ ├── github.service.ts │ │ ├── database.ts │ │ ├── assignUserModal │ │ │ ├── assignUserModal.component.html │ │ │ └── assignUserModal.component.ts │ │ ├── assignTagModal │ │ │ ├── assignTagModal.component.html │ │ │ └── assignTagModal.component.ts │ │ ├── userPhoto │ │ │ └── userPhoto.component.ts │ │ ├── interceptor │ │ │ └── mock.interceptor.ts │ │ ├── selectIconModal │ │ │ ├── selectIconModal.component.html │ │ │ └── selectIconModal.component.ts │ │ ├── highlight.service.ts │ │ ├── promiseCache.service.ts │ │ ├── alias.service.ts │ │ ├── promiseCache.decorator.ts │ │ ├── tag.service.ts │ │ ├── user.service.ts │ │ └── markdown │ │ │ └── markdown.component.ts │ ├── contributorPage │ │ ├── contributorPage.component.scss │ │ ├── contributorPage.component.html │ │ └── contributorPage.component.ts │ ├── app.component.scss │ ├── viewerPage │ │ ├── sidebar │ │ │ ├── sidebar.model.ts │ │ │ ├── sidebarItem.model.ts │ │ │ ├── sidebar.component.scss │ │ │ ├── sidebar.component.ts │ │ │ └── sidebar.component.html │ │ ├── viewerPage.component.html │ │ └── viewerPage.component.scss │ ├── app.component.ts │ ├── resourcesPage │ │ ├── resourcesPage.component.ts │ │ └── resourcesPage.component.scss │ ├── contributorsPage │ │ ├── contributorsPage.component.ts │ │ ├── contributorBadge │ │ │ ├── contributorBadge.component.html │ │ │ └── contributorBadge.component.ts │ │ └── contributorsPage.component.scss │ ├── app.component.html │ ├── historyPage │ │ └── assignIssueModal │ │ │ ├── assignIssueModal.component.html │ │ │ └── assignIssueModal.component.ts │ ├── app.component.spec.ts │ └── iconPage │ │ └── iconPage.component.scss ├── content │ ├── documentation.md │ ├── contributors.md │ ├── api │ │ ├── model │ │ │ ├── version.yaml │ │ │ ├── iconFont.yaml │ │ │ ├── alias.yaml │ │ │ ├── style.yaml │ │ │ ├── tag.yaml │ │ │ ├── package.yaml │ │ │ ├── fontVersion.yaml │ │ │ ├── font.yaml │ │ │ ├── user.yaml │ │ │ ├── modification.yaml │ │ │ └── icon.yaml │ │ ├── post-admin-icon.md │ │ ├── get-admin-package-font.md │ │ ├── get-package-user.md │ │ ├── get-tag.md │ │ ├── get-icon-by-id.md │ │ ├── get-icon-by-name.md │ │ ├── get-user-by-id.md │ │ ├── get-package.md │ │ ├── get-style.md │ │ ├── get-user.md │ │ ├── get-base-icons.md │ │ ├── get-admin-icon-modification.md │ │ ├── get-package-by-id.md │ │ ├── post-admin-icon-data.md │ │ ├── post-admin-icon-name.md │ │ ├── post-admin-icon-tag.md │ │ ├── post-admin-icon-optimize.md │ │ ├── post-admin-icon-description.md │ │ ├── post-admin-icon-style.md │ │ ├── post-admin-icon-alias.md │ │ └── post-admin-user.md │ ├── 404.md │ ├── guides.md │ ├── contact.md │ ├── getting-started-bootstrap-v3.md │ ├── guide-webfont.md │ ├── code-of-conduct.md │ ├── github.md │ ├── roadmap.md │ ├── about.md │ ├── getting-started-rollupjs.md │ ├── getting-started-bootstrap-alert.md │ ├── getting-started-webpack.md │ ├── getting-started-visual-studio-code.md │ ├── getting-started-bootstrap-listgroup.md │ ├── getting-started-windows.md │ ├── guide-first-party.md │ ├── getting-started-ember.md │ ├── getting-started-bootstrap-breadcrumb.md │ ├── getting-started-bootstrap-intro.md │ ├── getting-started-webcomponent.md │ ├── getting-started-svelte.md │ ├── getting-started-bootstrap-nav.md │ ├── and.md │ ├── getting-started-bootstrap-card.md │ ├── getting-started-svg.md │ ├── getting-started-bootstrap-dropdown.md │ ├── getting-started-vuejs.md │ ├── getting-started.md │ ├── guide-iconify.md │ ├── getting-started-angularjs.md │ ├── getting-started-ruby-on-rails.md │ ├── guide-webfont-alternative.md │ ├── api.md │ ├── getting-started-bootstrap-modal.md │ └── getting-started-polymer.md ├── favicon.ico ├── favicon.png ├── @types │ ├── css.d.ts │ └── html.d.ts ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── main.ts ├── admin.html ├── tsconfig.json ├── polyfills.ts ├── test.ts └── index.html ├── .github ├── CODEOWNERS └── workflows │ └── main.yml ├── .vscode └── settings.json ├── typings.json ├── e2e ├── app.po.ts ├── app.e2e-spec.ts └── tsconfig.json ├── .editorconfig ├── tsconfig.json ├── tsconfig.base.json ├── .browserslistrc ├── .gitignore ├── protractor.conf.js ├── karma.conf.js └── README.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/api/admin/mock.get.json: -------------------------------------------------------------------------------- 1 | true -------------------------------------------------------------------------------- /src/site/pageNotFound/pageNotFound.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/admin/basePage/basePage.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/admin/indexPage/indexPage.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/admin/sheetPage/sheetPage.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/downloadPage/downloadPage.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/notFoundPage/notFoundPage.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/site/navDocs/navDocs.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /src/site/navMenu/navMenu.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /src/api/login/meta.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Admin" 3 | } -------------------------------------------------------------------------------- /src/app/githubPage/githubPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | 3 | } -------------------------------------------------------------------------------- /src/app/shared/modificationTable/modificationTable.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/content/documentation.md: -------------------------------------------------------------------------------- 1 | # Documentation 2 | 3 | This page... -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | src/content/guide-home-assistant.md @GreenTurtwig 2 | -------------------------------------------------------------------------------- /src/site/carbon/carbon.html: -------------------------------------------------------------------------------- 1 |
2 | Carbon 3 |
-------------------------------------------------------------------------------- /src/app/contributorPage/contributorPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | 3 | } -------------------------------------------------------------------------------- /src/site/pageNotFound/pageNotFound.html: -------------------------------------------------------------------------------- 1 | Not Found 2 |
-------------------------------------------------------------------------------- /src/api/admin/icon/tag/mock.post.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "fake1", 3 | "name": "tag1" 4 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/favicon.png -------------------------------------------------------------------------------- /src/@types/css.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const value: string; 3 | export default value 4 | } -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | 3 | span { 4 | background: green; 5 | } 6 | } -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/@types/html.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.html' { 2 | const value: string; 3 | export default value 4 | } -------------------------------------------------------------------------------- /src/api/admin/font/D051337E-BC7E-11E5-A4E9-842B2B6CFE1B/next/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "codepoint": "ff58" 3 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "./node_modules/typescript/lib", 3 | "editor.tabSize": 2, 4 | } -------------------------------------------------------------------------------- /src/content/contributors.md: -------------------------------------------------------------------------------- 1 | As the maintainer of this project it cannot be said enough times I could never have mainta -------------------------------------------------------------------------------- /src/app/downloadPage/downloadPage.component.html: -------------------------------------------------------------------------------- 1 | 2 |

Home

-------------------------------------------------------------------------------- /src/assets/resources/mdil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/mdil.png -------------------------------------------------------------------------------- /src/assets/resources/Roboto.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/Roboto.woff2 -------------------------------------------------------------------------------- /src/assets/resources/mdil.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/mdil.design -------------------------------------------------------------------------------- /src/assets/resources/nova.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/nova.design -------------------------------------------------------------------------------- /src/app/shared/delay.ts: -------------------------------------------------------------------------------- 1 | export async function delay(ms: number = 0) { 2 | return new Promise( resolve => setTimeout(resolve, ms) ); 3 | } -------------------------------------------------------------------------------- /src/assets/resources/codepen.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/codepen.design -------------------------------------------------------------------------------- /src/assets/resources/grid-96.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/grid-96.design -------------------------------------------------------------------------------- /src/assets/resources/icongrid.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/icongrid.design -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "highlight.js": "registry:dt/highlight.js#9.1.0+20161227120821" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/resources/home-scss.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/home-scss.design -------------------------------------------------------------------------------- /src/assets/resources/icon-grid.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/icon-grid.design -------------------------------------------------------------------------------- /src/app/notFoundPage/notFoundPage.component.html: -------------------------------------------------------------------------------- 1 | 2 |

Unable to find page.

-------------------------------------------------------------------------------- /src/assets/resources/home-variants.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/home-variants.design -------------------------------------------------------------------------------- /src/assets/resources/icon-grid-240.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/icon-grid-240.design -------------------------------------------------------------------------------- /src/assets/resources/placeholder.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/placeholder.design -------------------------------------------------------------------------------- /src/assets/resources/systemicons.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/systemicons.design -------------------------------------------------------------------------------- /src/api/package/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/name/account/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "error": { 3 | "message":"Icon does not exist." 4 | } 5 | } -------------------------------------------------------------------------------- /src/assets/resources/home-opensource.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/home-opensource.design -------------------------------------------------------------------------------- /src/assets/resources/mdi-preview-nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/mdi-preview-nodejs.png -------------------------------------------------------------------------------- /src/assets/resources/github-preview-blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/github-preview-blank.png -------------------------------------------------------------------------------- /src/assets/resources/home-documentation.design: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/home-documentation.design -------------------------------------------------------------------------------- /src/assets/resources/github-preview-blank-draft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/github-preview-blank-draft.png -------------------------------------------------------------------------------- /src/assets/resources/github-preview-overlay-wip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/github-preview-overlay-wip.png -------------------------------------------------------------------------------- /src/content/api/model/version.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | major: 4 | type: integer 5 | minor: 6 | type: integer 7 | patch: 8 | type: integer -------------------------------------------------------------------------------- /src/site/carbon/carbon.css: -------------------------------------------------------------------------------- 1 | [part="carbon"] { 2 | width: 300px; 3 | height: 100px; 4 | border-radius: 0.25rem; 5 | border: 0.25rem solid var(--site-color); 6 | } -------------------------------------------------------------------------------- /src/api/admin/font/version/8c70e3fd-a857-11e9-aab8-94188269ec50/generate/svg/cache/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "isCached": true, 3 | "date": "2019-07-29T04:32:46+00:00" 4 | } -------------------------------------------------------------------------------- /src/assets/resources/github-preview-overlay-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/github-preview-overlay-link.png -------------------------------------------------------------------------------- /src/assets/resources/github-preview-overlay-download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/github-preview-overlay-download.png -------------------------------------------------------------------------------- /src/assets/resources/xamarin-android-file-location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/xamarin-android-file-location.png -------------------------------------------------------------------------------- /src/assets/resources/xamarin-ios-file-location-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/xamarin-ios-file-location-small.png -------------------------------------------------------------------------------- /src/assets/resources/xamarin-uwp-file-location-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/xamarin-uwp-file-location-small.png -------------------------------------------------------------------------------- /src/app/shared/enums/downloadType.enum.ts: -------------------------------------------------------------------------------- 1 | export enum DownloadType { 2 | Png = "png", 3 | Jpg = "jpg", 4 | Svg = "svg", 5 | VectorDrawable = "vector-drawable" 6 | } -------------------------------------------------------------------------------- /src/assets/resources/xamarin-fontfamily-and-code-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Templarian/MaterialDesign-Site/HEAD/src/assets/resources/xamarin-fontfamily-and-code-small.png -------------------------------------------------------------------------------- /src/api/admin/icon/E76EC23F-AB71-49B3-9173-841544527A20/alias/uuid1/mock.delete.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": "uuid1", 3 | "name": "test1" 4 | }, { 5 | "id": "uuid2", 6 | "name": "test2" 7 | }] -------------------------------------------------------------------------------- /src/api/admin/icon/E76EC23F-AB71-49B3-9173-841544527A20/tag/uuid1/mock.delete.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": "uuid1", 3 | "name": "Tag1" 4 | }, { 5 | "id": "uuid2", 6 | "name": "Tag2" 7 | }] -------------------------------------------------------------------------------- /src/content/404.md: -------------------------------------------------------------------------------- 1 | # 404 Not Found 2 | 3 | Please create an issue... 4 | 5 | ## Missing Icon 6 | 7 | In rare instances icons do get renamed. Please use the search in the top right to find it. -------------------------------------------------------------------------------- /src/app/shared/carbon/carbon.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /src/content/api/model/iconFont.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | codepoint: 4 | type: string 5 | version: 6 | $ref: '#/api/model/version' 7 | font: 8 | $ref: '#/api/model/font' -------------------------------------------------------------------------------- /src/content/api/model/alias.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | name: 7 | type: string 8 | pattern: /$[a-z0-9-]+^/ 9 | example: user -------------------------------------------------------------------------------- /src/content/guides.md: -------------------------------------------------------------------------------- 1 | # Guides 2 | 3 | The guides below are written by the community for their favorite uses of the icons. 4 | 5 | ## Home Assistant 6 | 7 | Home Assistant is a popular [content here]. -------------------------------------------------------------------------------- /src/content/contact.md: -------------------------------------------------------------------------------- 1 | # Contact 2 | 3 | Please create an [issue](https://github.com/Templarian/MaterialDesign/issues/new/choose). 4 | 5 | Thanks,
6 | [Austin Andrews](https://twitter.com/templarian) -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-v3.md: -------------------------------------------------------------------------------- 1 | # Bootstrap v3 2 | 3 | This documentation page will outline Bootstrap v3 usage. 4 | 5 | [View Documentation on CodePen](https://codepen.io/templarian/pen/JGWxgY) -------------------------------------------------------------------------------- /src/app/shared/enums/packageType.enum.ts: -------------------------------------------------------------------------------- 1 | export enum PackageType { 2 | MaterialDesignIcons = '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B', 3 | MaterialDesignIconsLight = '531A9B44-1962-11E5-89CC-842B2B6CFE1B' 4 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon 2 | 3 | Inserts `icon` into the database. 4 | 5 | ```text 6 | POST api/admin/icon 7 | ``` 8 | 9 | ```yaml 10 | $ref: '#/api/model/icon' 11 | ``` -------------------------------------------------------------------------------- /src/content/guide-webfont.md: -------------------------------------------------------------------------------- 1 | # Guide Webfont 2 | 3 | Building the webfont from scratch can be done by following the guide below. 4 | 5 | ## Requirements 6 | 7 | - NPM 8 | - Grunt Webfont 9 | 10 | Explain the process here in detail. -------------------------------------------------------------------------------- /src/app/shared/iconPreview/iconPreview.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
-------------------------------------------------------------------------------- /src/app/viewerPage/sidebar/sidebar.model.ts: -------------------------------------------------------------------------------- 1 | import { SidebarItem } from './sidebarItem.model'; 2 | 3 | export class Sidebar { 4 | 5 | constructor (public url: string, 6 | public items: SidebarItem[]) { 7 | 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /src/api/admin/tag/mock.get.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": "fake1", 3 | "tag": "account", 4 | "count": 20 5 | }, 6 | { 7 | "id": "fake2", 8 | "tag": "boat", 9 | "count": 40 10 | }, 11 | { 12 | "id": "fake3", 13 | "tag": "test", 14 | "count": 60 15 | }] -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class ProjectTestPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/api/init/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [{ 3 | "id": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", 4 | "version": { 5 | "major": 2, 6 | "minor": 8, 7 | "build": 94 8 | }, 9 | "count": 2894 10 | }] 11 | } -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | padding: 10px 15px; 3 | a { 4 | color: #FFF; 5 | svg path { 6 | fill: #FFF; 7 | } 8 | } 9 | 10 | svg path { 11 | fill: rgba(255, 255, 255, 0.4); 12 | } 13 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'app works!'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/contributorPage/contributorPage.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | Placeholder Left 5 |
6 |
7 | Placeholder Right 8 |
9 |
-------------------------------------------------------------------------------- /src/app/shared/icon/icon.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ name }} 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/app/shared/iconViewer/iconViewer.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/shared/models/alias.model.ts: -------------------------------------------------------------------------------- 1 | export class Alias { 2 | 3 | constructor ( 4 | public id?: string, 5 | public name?: string 6 | ) { } 7 | 8 | from(alias: Alias): Alias { 9 | this.id = alias.id; 10 | this.name = alias.name; 11 | return this; 12 | } 13 | 14 | } -------------------------------------------------------------------------------- /src/app/shared/models/style.model.ts: -------------------------------------------------------------------------------- 1 | export class Style { 2 | public id: string; 3 | public name: string; 4 | public count: number = null; 5 | 6 | from(style: Style): Style { 7 | this.id = style.id; 8 | this.name = style.name; 9 | this.count = style.count; 10 | return this; 11 | } 12 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/content/api/model/style.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | example: bb5d615c-d404-11e8-a666-94188269ec50 7 | name: 8 | type: string 9 | pattern: /$[a-z0-9-]+^/ 10 | example: outline 11 | count: 12 | type: integer 13 | example: 42 -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'footer[mdi-footer]', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent { 9 | name = 'Material Design Icons'; 10 | } -------------------------------------------------------------------------------- /src/app/admin/indexeddbPage/indexeddbPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | 3 | } 4 | 5 | .grid { 6 | display: grid; 7 | grid-template-columns: repeat(20, 1.5rem); 8 | grid-template-rows: repeat(250, 1.5rem); 9 | } 10 | 11 | .grid svg { 12 | grid-row: 3; 13 | grid-column: 3; 14 | background: red; 15 | } -------------------------------------------------------------------------------- /src/app/notFoundPage/notFoundPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-notfound-page', 5 | templateUrl: './notFoundPage.component.html', 6 | styleUrls: ['./notFoundPage.component.scss'] 7 | }) 8 | export class NotFoundPageComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/content/code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | > If at anytime you choose to do something that a rational person of average intelligence could reasonably consider your actions as "Being a dick", you are in violation of this code of conduct. 4 | 5 | Please contact @templarian on twitter to report any incidents for review. 6 | -------------------------------------------------------------------------------- /src/app/resourcesPage/resourcesPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-resources-page', 5 | templateUrl: './resourcesPage.component.html', 6 | styleUrls: ['./resourcesPage.component.scss'] 7 | }) 8 | export class ResourcesPageComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/shared/models/tag.model.ts: -------------------------------------------------------------------------------- 1 | export class Tag { 2 | public id: string; 3 | public name: string; 4 | public url: string; 5 | public count: number; 6 | 7 | from(tag: Tag): Tag { 8 | this.id = tag.id; 9 | this.name = tag.name; 10 | this.url = tag.url; 11 | this.count = tag.count; 12 | return this; 13 | } 14 | } -------------------------------------------------------------------------------- /src/app/downloadPage/downloadPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-download-page', 5 | templateUrl: './downloadPage.component.html', 6 | styleUrls: ['./downloadPage.component.scss'] 7 | }) 8 | export class DownloadPageComponent { 9 | title: string = 'Download'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/viewerPage/sidebar/sidebarItem.model.ts: -------------------------------------------------------------------------------- 1 | export class SidebarItem { 2 | constructor (public icon: string, 3 | public text: string, 4 | public subText: string | null, 5 | public url: string, 6 | public hash: string, 7 | public subItems: SidebarItem[]) { 8 | 9 | } 10 | } -------------------------------------------------------------------------------- /src/content/api/model/tag.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | name: 7 | type: string 8 | example: Account / User 9 | url: 10 | type: string 11 | pattern: /$[a-z0-9-]+^/ 12 | description: Url friendly string 13 | example: user 14 | count: 15 | type: integer 16 | example: 42 -------------------------------------------------------------------------------- /src/app/contributorPage/contributorPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-contributor-page', 5 | templateUrl: './contributorPage.component.html', 6 | styleUrls: ['./contributorPage.component.scss'] 7 | }) 8 | export class ContributorPageComponent { 9 | title: string = 'Home'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/shared/iconPreview/iconPreview.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | border: 1px solid #DDD; 4 | border-radius: 0.25rem; 5 | .icon-grid { 6 | width: 240px; 7 | height: 240px; 8 | background: url('/assets/resources/icon-grid-240.svg'); 9 | svg { 10 | width: 240px; 11 | height: 240px; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/content/api/get-admin-package-font.md: -------------------------------------------------------------------------------- 1 | ### Get Admin Package Fonts 2 | 3 | ``` 4 | GET api/admin/package/:package_id/font 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Retrieve an array of fonts for a given package. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/font' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/content/api/get-package-user.md: -------------------------------------------------------------------------------- 1 | ### Get List of Users by PackageId 2 | 3 | ``` 4 | GET api/package/:packageId/user 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | List all `user` objects associated to a `packageId`. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/user' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/content/api/get-tag.md: -------------------------------------------------------------------------------- 1 | ### Get Tags 2 | 3 | ``` 4 | GET api/:packageId/tag 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | A list of tags used to group icons in the system. If count is 0 the item will not be returned. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/tag' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/app/contributorsPage/contributorsPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-contributors-page', 5 | templateUrl: './contributorsPage.component.html', 6 | styleUrls: ['./contributorsPage.component.scss'] 7 | }) 8 | export class ContributorsPageComponent { 9 | title: string = 'Contributors'; 10 | } 11 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { enableProdMode } from '@angular/core'; 3 | import { environment } from './environments/environment'; 4 | import { AppModule } from './app/app.module'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | platformBrowserDynamic().bootstrapModule(AppModule); 11 | -------------------------------------------------------------------------------- /src/app/shared/banner/banner.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | 11 |
-------------------------------------------------------------------------------- /src/content/api/get-icon-by-id.md: -------------------------------------------------------------------------------- 1 | ### Get Icon by Id 2 | 3 | ``` 4 | GET api/icon/:iconId 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Retrieve a single icon and all public properties at once. Note looping this is very slow as it uses no cache layer to ensure the latest data. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | $ref: '#/api/model/icon' 17 | ``` 18 | 19 | /tab 20 | /tabs -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { ProjectTestPage } from './app.po'; 2 | 3 | describe('project-test App', function() { 4 | let page: ProjectTestPage; 5 | 6 | beforeEach(() => { 7 | page = new ProjectTestPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/app/shared/iconSearch/iconSearch.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .search { 3 | position: relative; 4 | 5 | > svg { 6 | position: absolute; 7 | width: 24px; 8 | height: 24px; 9 | top: 8px; 10 | left: 8px 11 | } 12 | 13 | > input { 14 | padding-left: 38px; 15 | } 16 | 17 | } 18 | } -------------------------------------------------------------------------------- /src/content/github.md: -------------------------------------------------------------------------------- 1 | Use the GitHub tool below to generate preview images. Note you must combine all vector items into a single vector. 2 | 3 | - Select all vector objects 4 | - Then unite or combine the paths 5 | - Export as an SVG 6 | - Upload the file below. 7 | - Or open the `.svg` in a text editor. 8 | - Find the `` in the `.svg` 9 | - Copy the `d` attribute's contents into the path data field below -------------------------------------------------------------------------------- /src/content/api/get-icon-by-name.md: -------------------------------------------------------------------------------- 1 | ### Get Icon by Name 2 | 3 | ``` 4 | GET api/package/:packageId/:iconName 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Icon names are unique across a package. This means a package id is also required when making the request as icons across packages share names. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | $ref: '#/api/model/icon' 17 | ``` 18 | 19 | /tab 20 | /tabs -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "module": "commonjs", 8 | "moduleResolution": "node", 9 | "outDir": "../dist/out-tsc-e2e", 10 | "sourceMap": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "../node_modules/@types" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/content/api/get-user-by-id.md: -------------------------------------------------------------------------------- 1 | ### Get User by Id 2 | 3 | ``` 4 | GET api/user/:userId 5 | GET api/package/:packageId/user/:userId 6 | ``` 7 | 8 | tabs 9 | tab Description 10 | 11 | Retrieve a single user (aka contributor). Using the alternative url with `packageId` will filter the `iconCount` to a specific `packageId`. 12 | 13 | /tab 14 | tab Response 15 | 16 | ```yaml 17 | $ref: '#/api/model/user' 18 | ``` 19 | 20 | /tab 21 | /tabs -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* 2 | This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. 3 | It is not intended to be used to perform a compilation. 4 | 5 | To learn more about this file see: https://angular.io/config/solution-tsconfig. 6 | */ 7 | { 8 | "files": [], 9 | "references": [ 10 | { 11 | "path": "./src/tsconfig.json" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es2020", 4 | "target": "ES2017", 5 | "lib": ["ES2017", "ES5", "ES6", "DOM"], 6 | "baseUrl": "src", 7 | "sourceMap": true, 8 | "experimentalDecorators": true, 9 | "strictNullChecks": true, 10 | "allowSyntheticDefaultImports": true, 11 | "outDir": "dist", 12 | "esModuleInterop": true 13 | }, 14 | "include": [ 15 | "src/**/*" 16 | ] 17 | } -------------------------------------------------------------------------------- /src/app/shared/banner/banner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-banner', 5 | templateUrl: './banner.component.html', 6 | styleUrls: ['./banner.component.scss'] 7 | }) 8 | export class BannerComponent { 9 | 10 | @Input('title') name: string = 'Loading...'; 11 | @Input('icon') data: string = null; 12 | @Input('carbon') carbon: boolean; 13 | subtitle: string = null; 14 | } 15 | -------------------------------------------------------------------------------- /src/content/api/get-package.md: -------------------------------------------------------------------------------- 1 | ### Get List of Packages 2 | 3 | ``` 4 | GET api/packages 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | A package is a named grouping of icons. Example: `Material Design Icons`. This endpoint lists the packages, but leaves off the `icons` object for performance reasons. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/package' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/site/carbon/carbon.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./carbon.html"; 4 | import style from './carbon.css'; 5 | 6 | @Component({ 7 | selector: 'site-carbon', 8 | style, 9 | template 10 | }) 11 | export default class SiteCarbon extends HTMLElement { 12 | @Part() $carbon: HTMLDivElement; 13 | 14 | connectedCallback() { 15 | 16 | } 17 | 18 | render(changes) { 19 | 20 | } 21 | } -------------------------------------------------------------------------------- /src/content/api/get-style.md: -------------------------------------------------------------------------------- 1 | ### Get Styles 2 | 3 | ``` 4 | GET api/:packageId/style 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Styles are documented in the icon naming guidelines. Examples include `box`, `circle`, `outline`, `off`. This endpoint requires the `packageId` so that it can return the count of each style. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/style' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/api/admin/package/mock.get.json: -------------------------------------------------------------------------------- 1 | [{"id":"38EF63D0-4744-11E4-B3CF-842B2B6CFE1B","name":"Material Design Icons","iconCount":3895},{"id":"DFFB9B7E-C30A-11E5-A4E9-842B2B6CFE1B","name":"Modern UI Icons Legacy","iconCount":1224},{"id":"531A9B44-1962-11E5-89CC-842B2B6CFE1B","name":"Material Design Icons Light","iconCount":273},{"id":"754B1578-7055-11E5-A4E9-842B2B6CFE1B","name":"Modern Icons","iconCount":69},{"id":"6D7CD8FE-7795-11E4-8C14-842B2B6CFE1B","name":"Modern UI Icons","iconCount":27}] -------------------------------------------------------------------------------- /src/admin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Material Design Icons 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Loading... 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/api/get-user.md: -------------------------------------------------------------------------------- 1 | ### Get Users 2 | 3 | ``` 4 | GET api/user 5 | GET api/package/:packageId/user 6 | GET api/package/:packageId/user/core 7 | ``` 8 | 9 | tabs 10 | tab Description 11 | 12 | Retrieve all users. An alternative is to get users for only a single package or just the core users assigned to maintain that package. 13 | 14 | /tab 15 | tab Response 16 | 17 | ```yaml 18 | type: array 19 | items: 20 | $ref: '#/api/model/user' 21 | ``` 22 | 23 | /tab 24 | /tabs -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /src/content/api/get-base-icons.md: -------------------------------------------------------------------------------- 1 | ### Get Base Icons by Id 2 | 3 | ``` 4 | GET api/icon/:baseIconId/base 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | A base icon is the most primative version of an icon. For instance `account-plus` has the base icon of `account`. This endpoint will retrieve all the icons with the same `baseIconId`. 11 | 12 | /tab 13 | tab Response 14 | 15 | ```yaml 16 | type: array 17 | items: 18 | $ref: '#/api/model/icon' 19 | ``` 20 | 21 | /tab 22 | /tabs -------------------------------------------------------------------------------- /src/app/shared/contextMenu/contextMenu.component.ts: -------------------------------------------------------------------------------- 1 | /*import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'context-menu', 5 | templateUrl: './contextMenu.component.html', 6 | styleUrls: ['./contextMenu.component.scss'] 7 | }) 8 | export class ContextMenuComponent { 9 | menu: Menu[] = []; 10 | 11 | constructor() { 12 | 13 | } 14 | 15 | } 16 | 17 | class Menu { 18 | name: string = 'error'; 19 | icon: string = null; 20 | menu: Menu[] = []; 21 | }*/ -------------------------------------------------------------------------------- /src/content/api/get-admin-icon-modification.md: -------------------------------------------------------------------------------- 1 | ### Get Admin Icon Modifications 2 | 3 | ``` 4 | GET api/admin/icon/:iconId/modification 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Every modification to an icon property is tracked. This returns a list of those modifications. 11 | 12 | > `isVisible = false` hides a modification from the public. 13 | 14 | /tab 15 | tab Response 16 | 17 | ```yaml 18 | type: array 19 | items: 20 | $ref: '#/api/model/modification' 21 | ``` 22 | 23 | /tab 24 | /tabs -------------------------------------------------------------------------------- /src/app/admin/tagPage/tagPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .preview { 3 | border: 1px solid rgba(0, 0, 0, 0.15); 4 | border-radius: 0.25rem; 5 | margin-right: 5px; 6 | padding: 5px 8px; 7 | vertical-align: top; 8 | display: inline-block; 9 | svg { 10 | width: 24px; 11 | height: 24px; 12 | vertical-align: middle; 13 | 14 | path { 15 | fill: #646464; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/app/admin/aliasPage/aliasPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .preview { 3 | border: 1px solid rgba(0, 0, 0, 0.15); 4 | border-radius: 0.25rem; 5 | margin-right: 5px; 6 | padding: 5px 8px; 7 | vertical-align: top; 8 | display: inline-block; 9 | svg { 10 | width: 24px; 11 | height: 24px; 12 | vertical-align: middle; 13 | 14 | path { 15 | fill: #646464; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/app/admin/profilePage/profilePage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .preview { 3 | border: 1px solid rgba(0, 0, 0, 0.15); 4 | border-radius: 0.25rem; 5 | margin-right: 5px; 6 | padding: 5px 8px; 7 | vertical-align: top; 8 | display: inline-block; 9 | svg { 10 | width: 24px; 11 | height: 24px; 12 | vertical-align: middle; 13 | 14 | path { 15 | fill: #646464; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/app/admin/renamePage/renamePage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .preview { 3 | border: 1px solid rgba(0, 0, 0, 0.15); 4 | border-radius: 0.25rem; 5 | margin-right: 5px; 6 | padding: 5px 8px; 7 | vertical-align: top; 8 | display: inline-block; 9 | svg { 10 | width: 24px; 11 | height: 24px; 12 | vertical-align: middle; 13 | 14 | path { 15 | fill: #646464; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/content/api/model/package.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | example: 38EF63D0-4744-11E4-B3CF-842B2B6CFE1B 7 | name: 8 | type: integer 9 | example: Material Design Icons 10 | width: 11 | type: integer 12 | example: 24 13 | height: 14 | type: integer 15 | example: 24 16 | fonts: 17 | type: array 18 | items: 19 | $ref: '#/api/model/font' 20 | icons: 21 | type: array 22 | items: 23 | $ref: '#/api/model/icon' -------------------------------------------------------------------------------- /src/content/roadmap.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | We have our on-going goal of adding icons tracked in milestones. But there are long term goals outlined below. 4 | 5 | - [Brand Icons](/roadmap/brand-icons) (Released in `v5+`) 6 | - [First Party](/contribute/first-party) 7 | - [Web Component](https://github.com/Templarian/MaterialDesign-Web-Component) 8 | - [Third Party](/contribute/third-party) 9 | - Promoting and encouraging third party adoption through stability, consistancy, and the potential for their communities to interact with us. -------------------------------------------------------------------------------- /src/app/resourcesPage/resourcesPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .card { 3 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 4 | border: 0; 5 | 6 | p { 7 | padding: 15px; 8 | font-size: 14px; 9 | margin: 0; 10 | } 11 | } 12 | 13 | .card-image { 14 | p { 15 | border-top: 1px solid #DDD; 16 | color: #333; 17 | border-radius: 0 0 0.25em 0.25em; 18 | background: #FFF; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/content/api/model/fontVersion.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | major: 7 | type: integer 8 | example: 3 9 | minor: 10 | type: integer 11 | example: 0 12 | patch: 13 | type: integer 14 | example: 0 15 | iconCount: 16 | type: integer 17 | example: 99 18 | description: 19 | type: string 20 | example: "October release." 21 | date: 22 | type: string 23 | format: date 24 | example: 0 25 | released: 26 | type: boolean 27 | example: true -------------------------------------------------------------------------------- /src/content/api/get-package-by-id.md: -------------------------------------------------------------------------------- 1 | ### Get Package By Id 2 | 3 | ``` 4 | GET api/package/:packageId 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Search through a package of icons. 11 | 12 | /tab 13 | tab Request 14 | 15 | There are various ways to filter the icon results by appending various parameters. 16 | 17 | ```text 18 | ?search=account 19 | ?name=account,account-plus 20 | ?uuid= 21 | ?author=uuid 22 | ?author=community 23 | ``` 24 | 25 | /tab 26 | tab Response 27 | 28 | ```yaml 29 | $ref: '#/api/model/package' 30 | ``` 31 | 32 | /tab 33 | /tabs -------------------------------------------------------------------------------- /src/app/shared/confirmModal/confirmModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | 4 | @Component({ 5 | selector: 'mdi-confirm-modal', 6 | templateUrl: './confirmModal.component.html' 7 | }) 8 | export class ConfirmModal { 9 | @Input() title: string; 10 | @Input() description: string; 11 | 12 | constructor( 13 | public activeModal: NgbActiveModal 14 | ) {} 15 | 16 | async ngOnInit() { 17 | 18 | } 19 | 20 | confirm() { 21 | this.activeModal.close(); 22 | } 23 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-data.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Path Data 2 | 3 | ``` 4 | POST api/admin/icon/data 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Update `icon.data`. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | data: 25 | type: string 26 | example: M...Z 27 | ``` 28 | 29 | /tab 30 | tab Response 31 | 32 | ```yaml 33 | $ref: '#/api/model/icon' 34 | ``` 35 | 36 | /tab 37 | /tabs -------------------------------------------------------------------------------- /src/content/about.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | Oldest commit was June 2014, but the planning for MDI started a few months prior and has slowly grown over the years. 4 | 5 | ## Material Design Icons 6 | 7 | Shortly after releasing MDI Google released an official set of icons which has made the project much easier to maintain and has grown 8 | 9 | ## Material Design Icons Light 10 | 11 | While MDI works great for many uses they can often look blocky when scaled to a larger size. 12 | 13 | ## Maintainer 14 | 15 | Austin Andrews maintains the project and generally ensures the community stays happy. -------------------------------------------------------------------------------- /src/app/shared/iconViewer/iconViewer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { Icon } from 'app/shared/models/icon.model'; 4 | import { Router } from '@angular/router'; 5 | 6 | @Component({ 7 | selector: 'mdi-icon-viewer', 8 | templateUrl: './iconViewer.component.html', 9 | styleUrls: ['./iconViewer.component.scss'] 10 | }) 11 | export class IconViewerComponent { 12 | @Input('icons') icons: Icon[]; 13 | 14 | constructor(private router: Router) { } 15 | 16 | select(icon) { 17 | this.router.navigateByUrl(`/icon/${icon.name}`); 18 | } 19 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-name.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Name 2 | 3 | ``` 4 | POST api/admin/icon/name 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Update `icon.name` to rename an icon. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | name: 25 | type: string 26 | example: new-name 27 | ``` 28 | 29 | /tab 30 | tab Response 31 | 32 | ```yaml 33 | $ref: '#/api/model/icon' 34 | ``` 35 | 36 | /tab 37 | /tabs -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Welcome to the Dev Server! This is all a work in progress. View Production Site 4 |
5 |
6 |
7 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /src/app/shared/confirmModal/confirmModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

{{title}}

3 | 6 |
7 |
8 |

{{description}}

9 |
10 |
11 | 12 | 13 |
-------------------------------------------------------------------------------- /src/content/api/post-admin-icon-tag.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Tag 2 | 3 | ``` 4 | POST api/admin/icon/tag 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Inserts `tag` into the database for an icon. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | tag: 25 | type: object 26 | properties: 27 | name: 28 | type: string 29 | example: user 30 | ``` 31 | 32 | /tab 33 | tab Response 34 | 35 | ```yaml 36 | $ref: '#/api/model/icon' 37 | ``` 38 | 39 | /tab 40 | /tabs -------------------------------------------------------------------------------- /src/api/package/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/name/home/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "5D085274-15B9-42EC-8CCE-2F94C5EC039C", 3 | "name": "home", 4 | "aliases": [{ 5 | "id": "uuid1", 6 | "name": "alias1" 7 | }, { 8 | "id": "uuid2", 9 | "name": "alias2" 10 | }], 11 | "tags": [{ 12 | "id": "uuid1", 13 | "name": "alias1" 14 | }, { 15 | "id": "uuid2", 16 | "name": "alias2" 17 | }], 18 | "data": "M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z", 19 | "user": { 20 | "id": "a8a312b6-07e4-11e4-bf19-842b2b6cfe1b", 21 | "name": "Google" 22 | } 23 | } -------------------------------------------------------------------------------- /src/content/getting-started-rollupjs.md: -------------------------------------------------------------------------------- 1 | # rollup.js - Getting Started 2 | 3 | The `@mdi/js` module and ES6 alongside [rollup.js](https://rollupjs.org) has [tree-shaking](https://rollupjs.org/guide/en#tree-shaking) enabled for production builds. 4 | 5 | Tree-shaking will remove any unused icons. The example below will only bundle a single icon's data. 6 | 7 | ```javascript 8 | import { mdiAccount } from '@mdi/js'; 9 | 10 | console.log(mdiAccount); // M...Z Path data 11 | ``` 12 | 13 | To learn more about using `@mdi/js` with frameworks look at the specific guides for more details. 14 | 15 | ## Troubleshooting 16 | 17 | [Edit this to list common issues] 18 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "", 4 | "declaration": false, 5 | "downlevelIteration": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "lib": ["es2017", "dom"], 9 | "mapRoot": "./", 10 | "module": "es2020", 11 | "moduleResolution": "node", 12 | "outDir": "../dist/out-tsc", 13 | "sourceMap": true, 14 | "target": "es2015", 15 | "typeRoots": [ 16 | "../node_modules/@types" 17 | ] 18 | } , 19 | "files": [ 20 | "main.ts", 21 | "polyfills.ts" 22 | ], 23 | "include": [ 24 | "src/**/*.d.ts" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /src/app/contributorsPage/contributorBadge/contributorBadge.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | {{user.name}} 7 | @{{user.twitter}} 8 | 9 | {{user.iconCount}} 10 | {{user.description}} 11 | 12 | 13 | Sponsor 14 | 15 |
-------------------------------------------------------------------------------- /src/app/shared/iconViewer/iconViewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .item { 3 | display: inline-block; 4 | padding: 0.5rem; 5 | width: 20%; 6 | text-align: center; 7 | vertical-align: top; 8 | background: #FFF; 9 | border: 1px solid #FFF; 10 | border-radius: 0.25rem; 11 | outline: none; 12 | &:hover { 13 | border-color: #DDD; 14 | } 15 | &:active { 16 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset; 17 | } 18 | svg { 19 | width: 48px; 20 | height: 48px; 21 | path { 22 | fill: #444; 23 | } 24 | } 25 | .name { 26 | font-size: 0.875rem; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-optimize.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Optimize 2 | 3 | ``` 4 | POST api/admin/icon/optimize 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Optimize `icon.data` with SVGO. This is used to preview the change and will not touch the database. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | data: 25 | type: string 26 | example: M...Z 27 | ``` 28 | 29 | /tab 30 | tab Response 31 | 32 | ```yaml 33 | $ref: '#/api/model/icon' 34 | ``` 35 | 36 | /tab 37 | /tabs -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-description.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Description 2 | 3 | ``` 4 | POST api/admin/icon/description 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Update `icon.description` in a Markdown string. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | description: 25 | type: string 26 | format: markdown 27 | example: Icon Description. 28 | ``` 29 | 30 | /tab 31 | tab Response 32 | 33 | ```yaml 34 | $ref: '#/api/model/icon' 35 | ``` 36 | 37 | /tab 38 | /tabs -------------------------------------------------------------------------------- /src/app/shared/models/fontVersion.model.ts: -------------------------------------------------------------------------------- 1 | export class FontVersion { 2 | public id: string; 3 | public major: number; 4 | public minor: number; 5 | public patch: number; 6 | public iconCount: number; 7 | public description: string; 8 | public date: Date; 9 | public released: boolean; 10 | 11 | from(font: FontVersion): FontVersion { 12 | this.id = font.id; 13 | this.major = font.major; 14 | this.minor = font.minor; 15 | this.patch = font.patch; 16 | this.iconCount = font.iconCount; 17 | this.description = font.description; 18 | this.date = new Date(font.date); 19 | this.released = font.released; 20 | return this; 21 | } 22 | } -------------------------------------------------------------------------------- /src/app/shared/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router, NavigationEnd } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'header[mdi-header]', 6 | templateUrl: './header.component.html', 7 | styleUrls: ['./header.component.scss'] 8 | }) 9 | export class HeaderComponent { 10 | public name = 'Material Design Icons'; 11 | public isNav = true; 12 | public isHome = true; 13 | 14 | constructor(private router: Router) { 15 | router.events.subscribe((val) => { 16 | this.isNav = true; 17 | if (val instanceof NavigationEnd) { 18 | this.isHome = val.url === '/'; 19 | } 20 | }); 21 | } 22 | } -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-alert.md: -------------------------------------------------------------------------------- 1 | ### Alerts 2 | 3 | tabs 4 | tab Example 5 | 6 | 9 | 12 | 13 | /tab 14 | tab Code 15 | 16 | ```html 17 | 20 | ``` 21 | 22 | /tab 23 | tab Notes 24 | 25 | Official Documentation for Alerts 26 | 27 | /tab 28 | /tabs -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | 10 | # IDEs and editors 11 | /.idea 12 | .project 13 | .classpath 14 | .c9/ 15 | *.launch 16 | .settings/ 17 | 18 | # IDE - VSCode 19 | .vscode/* 20 | !.vscode/settings.json 21 | !.vscode/tasks.json 22 | !.vscode/launch.json 23 | !.vscode/extensions.json 24 | 25 | # misc 26 | /.sass-cache 27 | /connect.lock 28 | /coverage/* 29 | /libpeerconnection.log 30 | npm-debug.log 31 | testem.log 32 | /typings 33 | 34 | # e2e 35 | /e2e/*.js 36 | /e2e/*.map 37 | 38 | #System Files 39 | .DS_Store 40 | Thumbs.db 41 | 42 | debug.log -------------------------------------------------------------------------------- /src/app/shared/iconSearch/iconSearch.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{r.name}} 6 | 7 |
8 | 9 | 10 | 11 | 18 |
-------------------------------------------------------------------------------- /src/content/getting-started-webpack.md: -------------------------------------------------------------------------------- 1 | # Webpack - Getting Started 2 | 3 | The `@mdi/js` module and ES6 alongside [Webpack](https://webpack.js.org/) has [tree-shaking](https://webpack.js.org/guides/tree-shaking/) enabled for production builds. 4 | 5 | Tree-shaking will remove any unused icons. The example below will only bundle a single icon's data. 6 | 7 | ```javascript 8 | import { mdiAccount } from '@mdi/js'; 9 | 10 | console.log(mdiAccount); // M...Z Path data 11 | ``` 12 | 13 | To learn more about using `@mdi/js` with frameworks look at the specific guides for more details. 14 | 15 | ## Troubleshooting 16 | 17 | For TypeScript make sure you have `"module":"es6"` set in the `tsconfig.json`. 18 | -------------------------------------------------------------------------------- /src/site/pageNotFound/pageNotFound.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./pageNotFound.html"; 4 | import style from './pageNotFound.css'; 5 | 6 | import { Icon } from '@mdi/components/mdi/shared/models/icon'; 7 | 8 | @Component({ 9 | selector: 'site-page-not-found', 10 | style, 11 | template 12 | }) 13 | export default class SitePageNotFound extends HTMLElement { 14 | @Prop() icons: Icon[] = []; 15 | @Prop() navigationItems: any[] = []; 16 | @Prop() name = ''; 17 | 18 | @Part() $message: HTMLDivElement; 19 | 20 | render(changes) { 21 | if (changes.name) { 22 | this.$message.innerText = this.name; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-style.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Style 2 | 3 | ``` 4 | POST api/admin/icon/style 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Toggle `icon.styles` on or off. For instance an icon called `account-outline` should have the `outline` style. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | style: 25 | type: object 26 | properties: 27 | id: 28 | type: string 29 | format: uuid 30 | ``` 31 | 32 | /tab 33 | tab Response 34 | 35 | ```yaml 36 | $ref: '#/api/model/icon' 37 | ``` 38 | 39 | /tab 40 | /tabs -------------------------------------------------------------------------------- /src/site/navDocs/navDocs.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | background: var(--site-color); 4 | padding: 0.5rem; 5 | } 6 | 7 | a { 8 | display: inline-flex; 9 | padding: 0.5rem 0.75rem; 10 | text-decoration: none; 11 | --mdi-icon-color: #fff; 12 | color: #fff; 13 | margin: 0.25rem 0.25rem 0.25rem 0; 14 | border-radius: 0.25rem; 15 | } 16 | a:hover { 17 | background: rgba(0, 0, 0, 0.2); 18 | } 19 | a.active, 20 | a:active, 21 | a:focus { 22 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; 23 | background: rgba(0, 0, 0, 0.3); 24 | } 25 | 26 | a span { 27 | align-self: center; 28 | } 29 | 30 | mdi-icon { 31 | margin-right: 0.25rem; 32 | margin-left: -0.125rem; 33 | align-self: center; 34 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-icon-alias.md: -------------------------------------------------------------------------------- 1 | ### Post Admin Icon Alias 2 | 3 | ``` 4 | POST api/admin/icon/alias 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Aliasing icons with alternative names allows others to find them. For example `account` may also be known as `user` or `person`. 11 | 12 | /tab 13 | tab Request 14 | 15 | ```yaml 16 | type: object 17 | properties: 18 | icon: 19 | type: object 20 | properties: 21 | id: 22 | type: string 23 | format: uuid 24 | alias: 25 | type: object 26 | properties: 27 | name: 28 | type: string 29 | example: user 30 | ``` 31 | 32 | /tab 33 | tab Response 34 | 35 | ```yaml 36 | $ref: '#/api/model/icon' 37 | ``` 38 | 39 | /tab 40 | /tabs -------------------------------------------------------------------------------- /src/api/admin/icon/mock.post.json: -------------------------------------------------------------------------------- 1 | {"id":"E76EC23F-AB71-49B3-9173-841544527A20","baseIconId":"E76EC23F-AB71-49B3-9173-841544527A20","packageId":"38EF63D0-4744-11E4-B3CF-842B2B6CFE1B","name":"account","description":"Account icon","data":"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z","user":{"name":"Google","github":"Google","twitter":"Google"},"aliases":[{"id":"e376cdb4-b783-11e6-bd37-842b2b6cfe1b","name":"person"},{"id":"66161c40-b1f1-11e7-bf5c-94188269ec50","name":"user"}],"tags":[{"id":"fe9fa4d9-c43f-11e7-bf5c-94188269ec50","name":"Account \/ User","url":"user"},{"id":"8399c00e-c441-11e7-bf5c-94188269ec50","name":"Home Automation","url":"home-automation"}],"fonts":[],"styles":[]} -------------------------------------------------------------------------------- /src/app/shared/models/package.model.ts: -------------------------------------------------------------------------------- 1 | import { Icon } from "app/shared/models/icon.model"; 2 | import { PackageType } from "../enums/packageType.enum"; 3 | 4 | export class Package { 5 | 6 | public id: PackageType | string; 7 | public name: string; 8 | public icons: Icon[] = []; 9 | public iconCount: string; 10 | 11 | constructor(packageId?: PackageType | string, packageName?: string) { 12 | this.id = packageId; 13 | this.name = packageName; 14 | } 15 | 16 | from (pack: Package): Package { 17 | this.id = pack.id; 18 | this.name = pack.name; 19 | if (pack.icons) { 20 | this.icons = pack.icons.map(i => new Icon().from(i)); 21 | } 22 | this.iconCount = pack.iconCount; 23 | return this; 24 | } 25 | } -------------------------------------------------------------------------------- /src/app/shared/iconPreview/iconPreview.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, SimpleChanges } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { Icon } from 'app/shared/models/icon.model'; 4 | 5 | @Component({ 6 | selector: 'mdi-icon-preview', 7 | templateUrl: './iconPreview.component.html', 8 | styleUrls: ['./iconPreview.component.scss'], 9 | }) 10 | export class IconPreviewComponent { 11 | constructor( 12 | private router: Router 13 | ) { } 14 | 15 | @Input('path') path: string = null; 16 | @Input('color') color: string = '#222'; 17 | pointCount: number = 0; 18 | 19 | setPoints(path: string) { 20 | 21 | } 22 | 23 | ngOnChanges(changes: SimpleChanges) { 24 | this.setPoints(changes.path.currentValue); 25 | } 26 | } -------------------------------------------------------------------------------- /src/api/package/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/name/accounts/mock.get.json: -------------------------------------------------------------------------------- 1 | {"id":"E76EC23F-AB71-49B3-9173-841544527A20","baseIconId":"E76EC23F-AB71-49B3-9173-841544527A20","packageId":"38EF63D0-4744-11E4-B3CF-842B2B6CFE1B","name":"account","description":"Account icon","data":"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z","user":{"name":"Google","github":"Google","twitter":"Google"},"aliases":[{"id":"e376cdb4-b783-11e6-bd37-842b2b6cfe1b","name":"person"},{"id":"66161c40-b1f1-11e7-bf5c-94188269ec50","name":"user"}],"tags":[{"id":"fe9fa4d9-c43f-11e7-bf5c-94188269ec50","name":"Account \/ User","url":"user"},{"id":"8399c00e-c441-11e7-bf5c-94188269ec50","name":"Home Automation","url":"home-automation"}],"fonts":[],"styles":[]} -------------------------------------------------------------------------------- /src/app/shared/assignAliasModal/assignAliasModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Add Alias to Icon

3 | 6 |
7 |
8 | 15 |
16 |
17 | 18 | 19 |
-------------------------------------------------------------------------------- /src/app/shared/github.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs/Observable'; 3 | import { HttpClient, HttpParams } from '@angular/common/http'; 4 | 5 | import { Issue } from 'app/shared/models/issue.model'; 6 | import { PromiseCacheService } from 'app/shared/promiseCache.service'; 7 | import { PromiseCache } from 'app/shared/promiseCache.decorator'; 8 | 9 | @Injectable() 10 | export class GitHubService { 11 | 12 | constructor( 13 | private http: HttpClient, 14 | private promiseCacheService: PromiseCacheService 15 | ) { } 16 | 17 | @PromiseCache() 18 | async getIssues(): Promise { 19 | let res = await this.http.get('/api/github/issues') 20 | .toPromise(); 21 | return res.map(i => new Issue().from(i)); 22 | } 23 | } -------------------------------------------------------------------------------- /src/content/getting-started-visual-studio-code.md: -------------------------------------------------------------------------------- 1 | # Visual Studio Code 2 | 3 | The [Material Design Icons Intellisense](https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense) extension allows quick intellisense features along with the ability to preview icons on hover. 4 | 5 | icon:microsoft-visual-studio-code Install for Visual Studio Code 6 | 7 | Maintained by [Lukas](https://github.com/lukas-tr) on [GitHub](https://github.com/lukas-tr/vscode-materialdesignicons-intellisense). 8 | 9 | ## Features 10 | 11 | - Supports `mdiAccountCirlce`, `mdi-account-circle` or `\mdi:account-circle` autocomplete. 12 | - Hover over text for a preview of the icon. 13 | -------------------------------------------------------------------------------- /src/app/shared/carbon/carbon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild, ElementRef } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mdi-carbon', 5 | templateUrl: './carbon.component.html', 6 | styleUrls: ['./carbon.component.scss'] 7 | }) 8 | export class CarbonComponent { 9 | @ViewChild('carbon', { static: true }) carbon: ElementRef; 10 | isLocal: boolean = window.location.href.match(/localhost/) !== null 11 | 12 | ngAfterViewInit() { 13 | if (!this.isLocal) { 14 | var s = document.createElement("script"); 15 | s.type = "text/javascript"; 16 | s.async = true; 17 | s.id = '_carbonads_js'; 18 | s.src = '//cdn.carbonads.com/carbon.js?serve=CKYIPKJW&placement=materialdesigniconscom'; 19 | this.carbon.nativeElement.appendChild(s); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/content/api/model/font.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | name: 7 | type: string 8 | example: Material Design Icons 9 | description: 10 | type: string 11 | example: Material Design Icons is... 12 | prefix: 13 | type: string 14 | example: mdi 15 | fontName: 16 | type: string 17 | example: Material Design Icons 18 | fileName: 19 | type: string 20 | example: materialdesignicons 21 | fontFamily: 22 | type: string 23 | example: materialdesignicons 24 | fontWeight: 25 | type: string 26 | example: normal 27 | price: 28 | type: number 29 | example: 0.0 30 | iconCount: 31 | type: integer 32 | example: 42 33 | versions: 34 | type: array 35 | items: 36 | $ref: '#/api/model/fontVersion' -------------------------------------------------------------------------------- /src/app/shared/database.ts: -------------------------------------------------------------------------------- 1 | import Dexie from 'dexie'; 2 | 3 | export class Database extends Dexie { 4 | hashes: Dexie.Table; 5 | icons: Dexie.Table; 6 | 7 | constructor() { 8 | super("IconCache"); 9 | 10 | this.version(1).stores({ 11 | hashes: '&id, hash', 12 | icons: '&id, idFull, fontId, name, data, aliases, tags, codepoint' 13 | }); 14 | 15 | this.hashes = this.table("hashes"); 16 | this.icons = this.table("icons"); 17 | } 18 | } 19 | 20 | export interface HashTable { 21 | id: string, 22 | hash: string 23 | } 24 | 25 | export interface IconTable { 26 | id: string, 27 | idFull: string, 28 | fontId: string, 29 | codepoint: number, 30 | name: string, 31 | data: string, 32 | version: string, 33 | aliases: any, 34 | tags: any 35 | } -------------------------------------------------------------------------------- /src/app/shared/models/issue.model.ts: -------------------------------------------------------------------------------- 1 | export class Issue { 2 | 3 | public user: string; 4 | public labels: string[]; 5 | public title: string; 6 | public plus: number; 7 | public minus: number; 8 | public created: string; 9 | public updated: string; 10 | public comments: number; 11 | public milestone: number; 12 | public number: number; 13 | public status: string = null; 14 | 15 | from(issue: Issue): Issue { 16 | this.user = issue.user; 17 | this.labels = issue.labels; 18 | this.title = issue.title; 19 | this.plus = issue.plus; 20 | this.minus = issue.minus; 21 | this.created = issue.created; 22 | this.updated = issue.updated; 23 | this.comments = issue.comments; 24 | this.milestone = issue.milestone; 25 | this.number = issue.number; 26 | return this; 27 | } 28 | 29 | } -------------------------------------------------------------------------------- /src/api/admin/icon/E76EC23F-AB71-49B3-9173-841544527A20/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "E76EC23F-AB71-49B3-9173-841544527A20", 3 | "package_id": "package1", 4 | "name": "account", 5 | "description": "Account icon", 6 | "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z", 7 | "aliases": [{ 8 | "id": "uuid1", 9 | "name": "user" 10 | }], 11 | "tags": [{ 12 | "id": "uuid1", 13 | "name": "User / Account", 14 | "url": "user" 15 | }], 16 | "styles": [{ 17 | "id": "uuid1", 18 | "name": "outline" 19 | }, { 20 | "id": "uuid2", 21 | "name": "circle" 22 | }], 23 | "user": { 24 | "id": "a8a312b6-07e4-11e4-bf19-842b2b6cfe1b", 25 | "name": "Google", 26 | "github": "Tester", 27 | "twitter": "Google" 28 | } 29 | } -------------------------------------------------------------------------------- /src/app/historyPage/assignIssueModal/assignIssueModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Assign Issue to History Item

3 | 6 |
7 |
8 | 16 |
17 |
18 | 19 | 20 |
-------------------------------------------------------------------------------- /src/app/shared/assignUserModal/assignUserModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Select a User

3 | 6 |
7 |
8 | 16 |
17 |
18 | 19 | 20 |
-------------------------------------------------------------------------------- /src/content/api/model/user.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | name: 7 | type: string 8 | example: Austin Andrews 9 | email: 10 | type: string 11 | format: email 12 | example: austin@email.com 13 | auth: Admin 14 | description: 15 | type: string 16 | example: Usually a short bio 17 | github: 18 | type: string 19 | example: Templarian 20 | twitter: 21 | type: string 22 | example: templarian 23 | base64: 24 | type: string 25 | description: Base64 Encoded 100x100 Avatar 26 | sponsored: 27 | type: boolean 28 | description: Can this user be sponsored on github 29 | core: 30 | type: boolean 31 | description: Core maintainer 32 | iconCount: 33 | type: integer 34 | example: 42 35 | description: Populated only if packageId is passed -------------------------------------------------------------------------------- /src/content/api/model/modification.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | modificationId: 7 | type: string 8 | format: uuid 9 | packageId: 10 | type: string 11 | format: uuid 12 | nameBefore: 13 | type: string 14 | example: account-locks 15 | nameAfter: 16 | type: string 17 | example: account-lock 18 | dataBefore: 19 | type: string 20 | example: M...Z 21 | dataAfter: 22 | type: string 23 | example: M...Z 24 | descriptionBefore: 25 | type: string 26 | descriptionAfter: 27 | type: string 28 | text: 29 | type: string 30 | date: 31 | type: string 32 | format: date 33 | issue: 34 | type: string 35 | isVisible: 36 | type: boolean 37 | auth: Contributor 38 | user: 39 | $ref: '#/api/model/user' 40 | icon: 41 | $ref: '#/api/model/icon' -------------------------------------------------------------------------------- /src/app/shared/assignTagModal/assignTagModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Add a Tag to an Icon

3 | 6 |
7 |
8 | 17 |
18 |
19 | 20 | 21 |
-------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /*************************************************************************************************** 2 | * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. 3 | */ 4 | import '@angular/localize/init'; 5 | // This file includes polyfills needed by Angular 2 and is loaded before 6 | // the app. You can add your own extra polyfills to this file. 7 | import 'core-js/es6/symbol'; 8 | import 'core-js/es6/object'; 9 | import 'core-js/es6/function'; 10 | import 'core-js/es6/parse-int'; 11 | import 'core-js/es6/parse-float'; 12 | import 'core-js/es6/number'; 13 | import 'core-js/es6/math'; 14 | import 'core-js/es6/string'; 15 | import 'core-js/es6/date'; 16 | import 'core-js/es6/array'; 17 | import 'core-js/es6/regexp'; 18 | import 'core-js/es6/map'; 19 | import 'core-js/es6/set'; 20 | import 'core-js/es6/reflect'; 21 | import 'zone.js/dist/zone'; 22 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | /*global jasmine */ 5 | var SpecReporter = require('jasmine-spec-reporter'); 6 | 7 | exports.config = { 8 | allScriptsTimeout: 11000, 9 | specs: [ 10 | './e2e/**/*.e2e-spec.ts' 11 | ], 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | directConnect: true, 16 | baseUrl: 'http://localhost:4200/', 17 | framework: 'jasmine', 18 | jasmineNodeOpts: { 19 | showColors: true, 20 | defaultTimeoutInterval: 30000, 21 | print: function() {} 22 | }, 23 | useAllAngular2AppRoots: true, 24 | beforeLaunch: function() { 25 | require('ts-node').register({ 26 | project: 'e2e' 27 | }); 28 | }, 29 | onPrepare: function() { 30 | jasmine.getEnv().addReporter(new SpecReporter()); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/app/admin/indexPage/indexPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { LoginService } from 'app/admin/services/login.service'; 3 | import { TagService } from 'app/shared/tag.service'; 4 | 5 | @Component({ 6 | selector: 'mdi-admin-index-page', 7 | templateUrl: './indexPage.component.html', 8 | styleUrls: ['./indexPage.component.scss'], 9 | providers: [ 10 | LoginService, 11 | TagService 12 | ] 13 | }) 14 | export class AdminIndexPageComponent { 15 | 16 | constructor ( 17 | private loginService: LoginService, 18 | private tagService: TagService 19 | ) {} 20 | 21 | async ngOnInit () { 22 | await this.loginService.isAuthed(); 23 | // Authed 24 | console.log('authed'); 25 | } 26 | 27 | async logout () { 28 | await this.loginService.logout(); 29 | } 30 | 31 | public selectIcon () { 32 | 33 | } 34 | 35 | 36 | } -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-listgroup.md: -------------------------------------------------------------------------------- 1 | ### List Group 2 | 3 | tabs 4 | tab Example 5 | 6 |
    7 |
  • Cras justo odio
    • 8 |
  • Dapibus ac facilisis in
    • 9 |
  • Morbi leo risus
    • 10 |
11 | 12 | /tab 13 | tab Code 14 | 15 | ```html 16 |
    17 |
  • Cras justo odio
    • 18 |
  • Dapibus ac facilisis in
    • 19 |
  • Morbi leo risus
    • 20 |
21 | ``` 22 | 23 | /tab 24 | tab Notes 25 | 26 | Official Documentation for List Group 27 | 28 | /tab 29 | /tabs -------------------------------------------------------------------------------- /src/app/shared/carbon/carbon.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .carbon-container { 3 | width: 308px; 4 | height: 108px; 5 | border: 4px solid rgba(0,0,0,0.1); 6 | border-radius: 4px; 7 | ::ng-deep { 8 | .carbon-wrap { 9 | display: flex; 10 | .carbon-text { 11 | line-height: 1.20rem; 12 | font-size: 0.80rem; 13 | padding: 0.25rem; 14 | color: #444; 15 | &:hover { 16 | color: #333; 17 | } 18 | } 19 | } 20 | .carbon-poweredby { 21 | float: right; 22 | font-size: 0.75rem; 23 | margin-top: -1.1rem; 24 | color: #333; 25 | margin-right: 0.1rem; 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/app/shared/userPhoto/userPhoto.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, SimpleChanges } from '@angular/core'; 2 | 3 | import { UserService } from 'app/shared/user.service'; 4 | 5 | @Component({ 6 | selector: 'mdi-user-photo', 7 | template: ``, 8 | providers: [ 9 | UserService 10 | ] 11 | }) 12 | export class UserComponent { 13 | @Input('userId') userId: string; 14 | 15 | base64: string = null; 16 | 17 | constructor( 18 | private userService: UserService 19 | ) { } 20 | 21 | async setUserId (userId: string) { 22 | let user = await this.userService.getUser(userId); 23 | this.base64 = user.base64; 24 | } 25 | 26 | data: string = 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z'; 27 | name: string = 'error'; 28 | 29 | ngOnChanges(changes: SimpleChanges){ 30 | this.setUserId(changes.userId.currentValue); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/historyPage/assignIssueModal/assignIssueModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | import { delay } from '../../shared/delay'; 4 | 5 | @Component({ 6 | selector: 'mdi-assign-issue-modal', 7 | templateUrl: './assignIssueModal.component.html' 8 | }) 9 | export class AssignIssueModal { 10 | @Input() issueNumber: number; 11 | @ViewChild('issueNumberInput', { static: true }) issueNumberInput: ElementRef; 12 | 13 | constructor(public activeModal: NgbActiveModal) {} 14 | 15 | async ngOnInit() { 16 | await delay(); 17 | this.issueNumberInput.nativeElement.focus(); 18 | } 19 | 20 | save($event) { 21 | this.activeModal.close(this.issueNumber); 22 | if ($event) { 23 | $event.preventDefault(); 24 | } 25 | } 26 | 27 | clear() { 28 | this.activeModal.close(null); 29 | } 30 | } -------------------------------------------------------------------------------- /src/api/package/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/4F013652-22DE-48CF-886B-A0FB995E8B41/mock.get.json: -------------------------------------------------------------------------------- 1 | {"id":"4F013652-22DE-48CF-886B-A0FB995E8B41","user":{"name":"Cody","twitter":"XT3000"},"comments":[],"tags":[],"isAuthor":false,"name":"access-point","description":"Access Point.","data":"M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z","date":"December 31, 1969 06:00pm"} -------------------------------------------------------------------------------- /src/app/shared/interceptor/mock.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpParams } from '@angular/common/http'; 3 | import { Observable } from 'rxjs/Observable'; 4 | 5 | @Injectable() 6 | export class MockInterceptor implements HttpInterceptor { 7 | intercept(req: HttpRequest, next: HttpHandler): Observable> { 8 | let isMock = window.location.href.match(/localhost/) !== null 9 | && req.url.match(/^\/api/) != null; 10 | if (isMock) { 11 | console.info(req.urlWithParams); 12 | console.info(req.body); 13 | let method = req.method.toLowerCase(); 14 | let mockReq = req.clone({ 15 | url: req.url + `/mock.${method}.json`, 16 | method: 'GET', 17 | params: new HttpParams() 18 | }); 19 | return next.handle(mockReq); 20 | } 21 | return next.handle(req); 22 | } 23 | } -------------------------------------------------------------------------------- /src/content/api/post-admin-user.md: -------------------------------------------------------------------------------- 1 | ### Post Admin User 2 | 3 | ``` 4 | POST api/admin/user 5 | ``` 6 | 7 | tabs 8 | tab Description 9 | 10 | Insert a new `user` into the database. These users are readonly and cannot be logged into. 11 | 12 | > **Information:** This API requires elevated `core` access. 13 | 14 | /tab 15 | tab Request 16 | 17 | ```yaml 18 | type: object 19 | properties: 20 | user: 21 | type: object 22 | properties: 23 | name: 24 | type: string 25 | github: 26 | type: string 27 | email: 28 | type: string 29 | format: email 30 | twitter: 31 | type: string 32 | avatar: 33 | type: string 34 | format: base64 35 | description: 36 | type: string 37 | website: 38 | type: string 39 | sponsored: 40 | type: boolean 41 | ``` 42 | 43 | /tab 44 | tab Response 45 | 46 | ```yaml 47 | $ref: '#/api/model/user' 48 | ``` 49 | 50 | /tab 51 | /tabs -------------------------------------------------------------------------------- /src/app/viewerPage/viewerPage.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | Suggest 7 | a Change 8 | or 9 | Edit on GitHub 10 |
11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
-------------------------------------------------------------------------------- /src/app/shared/models/font.model.ts: -------------------------------------------------------------------------------- 1 | import { FontVersion } from './fontVersion.model'; 2 | 3 | export class Font { 4 | public id: string; 5 | public name: string; 6 | public description: string; 7 | public prefix: string; 8 | public fontName: string; 9 | public fileName: string; 10 | public fontFamily: string; 11 | public fontWeight: string; 12 | public price: string; 13 | public versions: FontVersion[] = []; 14 | public iconCount: number; 15 | 16 | from(font: Font): Font { 17 | this.id = font.id; 18 | this.name = font.name; 19 | this.description = font.description; 20 | this.prefix = font.prefix; 21 | this.fontName = font.fontName; 22 | this.fontFamily = font.fontFamily; 23 | this.fontWeight = font.fontWeight; 24 | this.price = font.price; 25 | this.iconCount = font.iconCount; 26 | if (font.versions) { 27 | this.versions = font.versions.map(f => new FontVersion().from(f)); 28 | } 29 | return this; 30 | } 31 | } -------------------------------------------------------------------------------- /src/app/shared/banner/banner.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | font-family: 'Roboto'; 4 | padding: 40px 60px; 5 | color: #FFF; 6 | 7 | h1 { 8 | margin: 0; 9 | .icon { 10 | display: inline-block; 11 | padding: 4px; 12 | background: #FFF; 13 | width: 32px; 14 | height: 32px; 15 | border-radius: 4px; 16 | vertical-align: middle; 17 | margin-top: -8px; 18 | margin-right: 4px; 19 | 20 | svg { 21 | width: 24px; 22 | height: 24px; 23 | vertical-align: top; 24 | 25 | path { 26 | fill: #414F56; 27 | } 28 | } 29 | } 30 | } 31 | 32 | ::ng-deep { 33 | .carbon-container { 34 | position: absolute; 35 | right: 20px; 36 | top: -29px; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build: 10 | 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - uses: actions/checkout@master 15 | - name: Install Dependencies 16 | run: npm install 17 | - name: Build admin for Production 18 | run: npm run build 19 | - name: Build site for Production 20 | run: npm run build:site 21 | - name: Sync to FTP 22 | uses: SamKirkland/FTP-Deploy-Action@2.0.0 23 | env: 24 | FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} 25 | FTP_SERVER: ${{ secrets.FTP_SERVER }} 26 | FTP_USERNAME: ${{ secrets.FTP_USERNAME }} 27 | LOCAL_DIR: ${{ secrets.LOCAL_DIR }} 28 | REMOTE_DIR: ${{ secrets.REMOTE_DIR }} 29 | - name: Trigger Server Steps 30 | uses: swinton/httpie.action@69125d73caa2c6821f6a41a86112777a37adc171 31 | with: 32 | args: POST https://dev.materialdesignicons.com/api/admin/build 33 | -------------------------------------------------------------------------------- /src/app/contributorsPage/contributorBadge/contributorBadge.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { UserService } from 'app/shared/user.service'; 3 | import { User } from 'app/shared/models/user.model'; 4 | 5 | @Component({ 6 | selector: 'mdi-contributor-badge', 7 | templateUrl: './contributorBadge.component.html', 8 | styleUrls: ['./contributorBadge.component.scss'], 9 | providers: [ 10 | UserService 11 | ] 12 | }) 13 | export class ContributorBadgeComponent { 14 | @Input('userId') userId: string; 15 | user: User = new User(); 16 | 17 | constructor( 18 | private userService: UserService 19 | ) { 20 | this.user.name = '...'; 21 | this.user.github = '...'; 22 | this.user.twitter = '...'; 23 | } 24 | 25 | async ngOnInit () { 26 | let users = await this.userService.getUsers(); 27 | users.forEach(u => { 28 | if (u.id == this.userId) { 29 | this.user = u; 30 | return false; 31 | } 32 | }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/shared/assignAliasModal/assignAliasModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | import { delay } from '../delay'; 4 | import { Alias } from '../models/alias.model'; 5 | import { AliasService } from '../alias.service'; 6 | import { Package } from '../models/package.model'; 7 | 8 | @Component({ 9 | selector: 'mdi-assign-alias-modal', 10 | templateUrl: './assignAliasModal.component.html', 11 | providers: [ 12 | AliasService 13 | ] 14 | }) 15 | export class AssignAliasModal { 16 | @Input() package: Package; 17 | @ViewChild('inputAlias', { static: true }) inputAlias: ElementRef; 18 | 19 | constructor( 20 | public activeModal: NgbActiveModal 21 | ) {} 22 | 23 | public alias: String = ''; 24 | 25 | async ngOnInit() { 26 | await delay(); 27 | this.inputAlias.nativeElement.focus(); 28 | } 29 | 30 | save() { 31 | this.activeModal.close(this.alias); 32 | } 33 | } -------------------------------------------------------------------------------- /src/content/getting-started-windows.md: -------------------------------------------------------------------------------- 1 | # Windows - Getting Started 2 | 3 | The Universal Windows Platform and WPF both use a vector format similar to SVG. 4 | 5 | ## Inline XAML 6 | 7 | If you wanted to display the icon at `48x48` place the SVG path data in place of `M...Z`. 8 | 9 | ```xml 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | 17 | ## MahApps.Metro.IconPacks 18 | 19 | Many popular Open Source icon packs are distributed via the `MahApps.Metro.IconPacks` package. They are nice enough to include both of our packs. These are updated constantly so you'll always have access to the latest version! 20 | 21 | [View MahApps.Metro.IconPacks on GitHub](https://github.com/MahApps/MahApps.Metro.IconPacks) 22 | 23 | ## As a WPF UserControl 24 | 25 | See the VectorIcon project: 26 | 27 | [alansingfield/VectorIcon Readme](https://github.com/alansingfield/VectorIcon/blob/master/README.md) 28 | -------------------------------------------------------------------------------- /src/content/guide-first-party.md: -------------------------------------------------------------------------------- 1 | # First Party Developer Guide 2 | 3 | > **Information:** icon:information-outline First party libraries/tools only differs from third party in who is publishing the packages. If a core member of MDI is involved in the publishing step of the package it is first party. 4 | 5 | ## NPM 6 | 7 | Only packages published under the [@mdi][org] organization are considered first party. 8 | 9 | ### Steps for Publishing 10 | 11 | ```bash 12 | git pull 13 | # (optional) Update Dependencies 14 | npm update 15 | # (optional) Build 16 | npm run build 17 | # update package.json 18 | # - "version": "1.0.0" 19 | # + "version": "1.0.1" 20 | git status 21 | git add . 22 | git commit -m "v1.0.1" 23 | git tag -a v1.0.1 -m "v1.0.1" 24 | git push 25 | git push origin --tags 26 | # Verify on GitHub then... 27 | npm publish 28 | ``` 29 | 30 | ## Other 31 | 32 | > Right now all first party packages are published through GitHub and NPM. 33 | 34 | [org]: https://www.npmjs.com/org/mdi -------------------------------------------------------------------------------- /src/app/shared/selectIconModal/selectIconModal.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Select Icon

3 | 6 |
7 |
8 | 15 |
16 | 17 | 18 | 19 |
20 |
21 |
22 | 24 | 27 |
-------------------------------------------------------------------------------- /src/assets/docs/angularjs/mdi.js: -------------------------------------------------------------------------------- 1 | angular.module('mdi', []) 2 | .service('mdiService', function () { 3 | var service = { 4 | icons: { 5 | error: 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z' 6 | } 7 | }; 8 | service.add = function (name, data) { 9 | service.icons[name] = data; 10 | }; 11 | service.get = function (name) { 12 | return service.icons[name] || service.icons.error; 13 | }; 14 | return service; 15 | }) 16 | .directive('mdi', [ 17 | 'mdiService', 18 | function(mdiService) { 19 | var controller = [ 20 | '$scope', 21 | function ($scope) { 22 | $scope.data = $scope.data || mdiService.get($scope.name); 23 | if (!($scope.data)) { 24 | throw 'mdi requires name or data attribute.'; 25 | } 26 | } 27 | ]; 28 | return { 29 | scope: { 30 | data: "=?", 31 | name: "=?", 32 | }, 33 | controller: controller, 34 | template: '' 35 | }; 36 | } 37 | ]); -------------------------------------------------------------------------------- /src/app/shared/highlight.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Inject } from '@angular/core'; 2 | 3 | import { PLATFORM_ID } from '@angular/core'; 4 | import { isPlatformBrowser } from '@angular/common'; 5 | 6 | import 'clipboard'; 7 | 8 | import 'prismjs'; 9 | import 'prismjs/components/prism-markup-templating'; 10 | import 'prismjs/components/prism-css'; 11 | import 'prismjs/components/prism-javascript'; 12 | import 'prismjs/components/prism-jsx'; 13 | import 'prismjs/components/prism-java'; 14 | import 'prismjs/components/prism-markup'; 15 | import 'prismjs/components/prism-typescript'; 16 | import 'prismjs/components/prism-sass'; 17 | import 'prismjs/components/prism-scss'; 18 | import 'prismjs/components/prism-yaml'; 19 | import 'prismjs/components/prism-php'; 20 | 21 | declare var Prism: any; 22 | 23 | @Injectable() 24 | export class HighlightService { 25 | 26 | constructor(@Inject(PLATFORM_ID) private platformId: Object) { } 27 | 28 | highlightAll() { 29 | if (isPlatformBrowser(this.platformId)) { 30 | Prism.highlightAll(); 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /src/api/admin/icon/57DD596E-AFB6-46D2-8415-2DED40839B11/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "57DD596E-AFB6-46D2-8415-2DED40839B11", 3 | "baseIconId": null, 4 | "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", 5 | "name": "bag-carry-on-check", 6 | "description": "Carry On Bag Check.", 7 | "data": "M15.28,16.69L18.14,13.88L18.84,14.58L15.28,18.14L13.17,16L13.88,15.28L15.28,16.69M8,21A2,2 0 0,1 6,19V9A2,2 0 0,1 8,7V21M9,7H14V4A2,2 0 0,1 12,2H16V10A6,6 0 0,1 22,16A6,6 0 0,1 16,22C14.77,22 13.63,21.63 12.68,21H9V7M16,12A4,4 0 0,0 12,16A4,4 0 0,0 16,20A4,4 0 0,0 20,16A4,4 0 0,0 16,12Z", 8 | "user": { 9 | "name": "Google", 10 | "github": "Google", 11 | "twitter": "Google" 12 | }, 13 | "aliases": [ 14 | { 15 | "id": "73264c86-2bc5-11e9-92de-94188269ec50", 16 | "name": "carry-on-bag-tick" 17 | } 18 | ], 19 | "tags": [ 20 | { 21 | "id": "1e719aec-c442-11e7-bf5c-94188269ec50", 22 | "name": "Transportation + Flying", 23 | "url": "transportation-flying" 24 | } 25 | ], 26 | "fonts": [], 27 | "styles": [] 28 | } -------------------------------------------------------------------------------- /src/content/api/model/icon.yaml: -------------------------------------------------------------------------------- 1 | type: object 2 | properties: 3 | id: 4 | type: string 5 | format: uuid 6 | example: E76EC23F-AB71-49B3-9173-841544527A20 7 | baseIconId: 8 | type: string 9 | format: uuid 10 | example: E76EC23F-AB71-49B3-9173-841544527A20 11 | description: Base icon id or self referenced if it is a base icon. 12 | packageId: 13 | type: string 14 | format: uuid 15 | example: 38EF63D0-4744-11E4-B3CF-842B2B6CFE1B 16 | name: 17 | type: string 18 | example: account 19 | description: 20 | type: string 21 | example: Used to represent an account or user. 22 | data: 23 | type: string 24 | format: string 25 | example: M...Z 26 | user: 27 | $ref: '#/api/model/user' 28 | aliases: 29 | type: array 30 | items: 31 | $ref: '#/api/model/alias' 32 | tags: 33 | type: array 34 | items: 35 | $ref: '#/api/model/tag' 36 | fonts: 37 | type: array 38 | items: 39 | $ref: '#/api/model/iconFont' 40 | styles: 41 | type: array 42 | items: 43 | $ref: '#/api/model/style' -------------------------------------------------------------------------------- /src/content/getting-started-ember.md: -------------------------------------------------------------------------------- 1 | # Ember - Getting Started 2 | 3 | Just as there are multiple ways to consume `mdi` (SVG, WebFont, JS, ...) there's more than one way to do it in Ember. 4 | As often happens in the [Ember](https://emberjs.com/) world, "there's an addon for that". Try searching [for `mdi` on emberobserver.com](https://emberobserver.com/?query=mdi) for other addons or integrate the icons directly into your application yourself. 5 | 6 | ## Third Party 7 | 8 | ### `ember-mdi` 9 | 10 | Refer to the [addon's README.md](https://github.com/kaermorchen/ember-mdi#getting-started) for documentation. 11 | In short, it uses [`@mdi/svg`](https://github.com/Templarian/MaterialDesign-SVG) to make an `icons.svg` file in your application's build pipeline and provides a `mdi-icon` component for use in your templates. 12 | 13 | ## WebFont 14 | 15 | Although [using the webfont is generally not recommended](/guide/webfont-alternatives) for performance reasons, you can easily use it (or iconify) in your Ember app. 16 | 17 | > **TODO:** ping @jacobq to write this if the date is past 2018/12/16 18 | -------------------------------------------------------------------------------- /src/app/shared/enums/modificationType.enum.ts: -------------------------------------------------------------------------------- 1 | export enum ModificationType { 2 | IconAliasCreated = '691c8829-b1e7-11e7-bf5c-94188269ec50', 3 | IconAliasDeleted = 'f1f70a76-b975-11e9-8ca0-94188269ec50', 4 | IconCreated = 'AFFE875E-01BC-4A34-9BE3-27625A155B28', 5 | IconDeleted = 'B1CE1713-A18A-4E9D-9E26-D0B4E44A1FAC', 6 | IconModified = '1506F66B-CC2A-4575-A20A-DC138628977A', 7 | IconRenamed = 'F7B6D49B-A86F-49AC-AF92-6B9D0DF6188B', 8 | IconTagCreated = 'a185a9e8-c192-11e7-bf5c-94188269ec50', 9 | IconTagDeleted = 'ffe6b5f6-b975-11e9-8ca0-94188269ec50', 10 | IconDescriptionModified = '3c638179-c4ca-11e8-9f27-94188269ec50', 11 | IconAuthorModified = '254591d0-b28e-11e9-8ca0-94188269ec50', 12 | WebfontPublished = '66B9FA99-1FAA-4D8F-B87F-B6F3CA444624', 13 | News = 'B4DEB3A8-A146-4086-9D7B-B67842A9CCB8', 14 | IconDeprecated = 'f92f310f-bfed-11e9-8ca0-94188269ec50', 15 | IconWorkInProgress = 'e262be80-bfed-11e9-8ca0-94188269ec50', 16 | IconLive = 'f92f2ba6-bfed-11e9-8ca0-94188269ec50', 17 | IconPublished = 'e262b92e-bfed-11e9-8ca0-94188269ec50' 18 | } -------------------------------------------------------------------------------- /src/api/icon/4F013652-22DE-48CF-886B-A0FB995E8B41/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "4F013652-22DE-48CF-886B-A0FB995E8B41", 3 | "baseIconId": "4F013652-22DE-48CF-886B-A0FB995E8B41", 4 | "user": { 5 | "name": "Cody", 6 | "twitter": "XT3000" 7 | }, 8 | "comments": [], 9 | "tags": [], 10 | "isAuthor": false, 11 | "name": "access-point", 12 | "description": "Access Point.", 13 | "data": "M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z", 14 | "date": "December 31, 1969 06:00pm" 15 | } -------------------------------------------------------------------------------- /src/api/icon/E76EC23F-AB71-49B3-9173-841544527A20/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "4F013652-22DE-48CF-886B-A0FB995E8B41", 3 | "baseIconId": "4F013652-22DE-48CF-886B-A0FB995E8B41", 4 | "user": { 5 | "name": "Cody", 6 | "twitter": "XT3000" 7 | }, 8 | "comments": [], 9 | "tags": [], 10 | "isAuthor": false, 11 | "name": "access-point", 12 | "description": "Access Point.", 13 | "data": "M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z", 14 | "date": "December 31, 1969 06:00pm" 15 | } -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js/dist/long-stack-trace-zone'; 2 | import 'zone.js/dist/proxy.js'; 3 | import 'zone.js/dist/sync-test'; 4 | import 'zone.js/dist/jasmine-patch'; 5 | import 'zone.js/dist/async-test'; 6 | import 'zone.js/dist/fake-async-test'; 7 | import { getTestBed } from '@angular/core/testing'; 8 | import { 9 | BrowserDynamicTestingModule, 10 | platformBrowserDynamicTesting 11 | } from '@angular/platform-browser-dynamic/testing'; 12 | 13 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 14 | declare var __karma__: any; 15 | declare var require: any; 16 | 17 | // Prevent Karma from running prematurely. 18 | __karma__.loaded = function () {}; 19 | 20 | // First, initialize the Angular testing environment. 21 | getTestBed().initTestEnvironment( 22 | BrowserDynamicTestingModule, 23 | platformBrowserDynamicTesting() 24 | ); 25 | // Then we find all the tests. 26 | let context = require.context('./', true, /\.spec\.ts$/); 27 | // And load the modules. 28 | context.keys().map(context); 29 | // Finally, start Karma to run the tests. 30 | __karma__.start(); 31 | -------------------------------------------------------------------------------- /src/app/shared/promiseCache.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | @Injectable() 3 | export class PromiseCacheService { 4 | 5 | // Cached promises 6 | private keys: object = {}; 7 | // Aliases mapped 8 | private maps: object = {}; 9 | 10 | private static instance: PromiseCacheService = undefined; 11 | 12 | static getInstance(): PromiseCacheService { 13 | return PromiseCacheService.instance; 14 | } 15 | 16 | constructor () { 17 | PromiseCacheService.instance = this; 18 | } 19 | 20 | remove (key: string) { 21 | if (key in this.map) { 22 | delete this.keys[this.map[key]]; 23 | } 24 | delete this.keys[key]; 25 | } 26 | 27 | has (key: string) { 28 | return (key in this.keys); 29 | } 30 | 31 | get (key: string) { 32 | return this.keys[key]; 33 | } 34 | 35 | set (key: string, promise: Promise): Promise { 36 | return this.keys[key] = promise; 37 | } 38 | 39 | map (from: string, to: string) { 40 | this.maps[from] = to; 41 | } 42 | 43 | removeMap (from: string) { 44 | delete this.maps[from]; 45 | } 46 | } -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-breadcrumb.md: -------------------------------------------------------------------------------- 1 | ### Breadcrumbs 2 | 3 | tabs 4 | tab Example 5 | 6 | 13 | 14 | /tab 15 | tab Code 16 | 17 | ```html 18 | 25 | ``` 26 | 27 | /tab 28 | tab Notes 29 | 30 | Official Documentation for Breadcrumbs 31 | 32 | /tab 33 | /tabs -------------------------------------------------------------------------------- /src/app/shared/models/downloadIcon.model.ts: -------------------------------------------------------------------------------- 1 | import { DownloadType } from "app/shared/enums/downloadType.enum"; 2 | 3 | export class DownloadIcon { 4 | id: string; 5 | type: DownloadType = DownloadType.Svg; 6 | path: string[] = []; 7 | width: number = 24; 8 | height: number = 24; 9 | padding: number = 0; 10 | paddingTop: number = 0; 11 | paddingRight: number = 0; 12 | paddingBottom: number = 0; 13 | paddingLeft: number = 0; 14 | foreground: string = "FFFFFF"; 15 | foregroundOpacity: number = 1; 16 | background: string = "000000"; 17 | backgroundOpacity: number = 1; 18 | radius: number = 0; 19 | borderWidth: number = 1; 20 | borderColor: string = "990000"; 21 | borderOpacity: number = 1; 22 | borderCap: string = "round"; 23 | borderArray: number[] = []; 24 | margin: number = 0; 25 | marginTop: number = 0; 26 | marginRight: number = 0; 27 | marginBottom: number = 0; 28 | marginLeft: number = 0; 29 | gridColor: string = "F0F0F0"; 30 | gridOpacity: number = 1; 31 | matteColor: string = "FFFFFF"; 32 | matteOpacity: number = 1; 33 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Material Design Icons 8 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-intro.md: -------------------------------------------------------------------------------- 1 | tabs 2 | tab Introduction 3 | 4 |

Bootstrap is an Open Source CSS framework containing many of the most used components.

5 | 6 |

This page is for Bootstrap v4, please view Bootstrap v3 for legacy support.

7 | 8 | /tab 9 | tab Install 10 | 11 |
12 |
13 |

A content delivery network provides a fast way to deliver the webfont.

14 | 
//cdn.jsdelivr.net/npm/@mdi/font@{{version}}/css/materialdesignicons.min.css
15 |
16 |
17 |

For NPM use:

18 | 
npm install @mdi/font
19 |
20 |
21 |
The CDN is sponsored by MaxCDN. This project could not exist without their support.
22 | 23 | /tab 24 | tab Helper CSS 25 | 26 | The below snippet of CSS must be included into your project. Future release may bundle these additional styles. 27 | 28 | ```css 29 | import:/assets/docs/bootstrap/helper.css 30 | ``` 31 | 32 | /tab 33 | /tabs -------------------------------------------------------------------------------- /src/content/getting-started-webcomponent.md: -------------------------------------------------------------------------------- 1 | # Web Components 2 | 3 | [![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon) 4 | [![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon) 5 | 6 | MDI can be used in conjunction with the [SvgIcon Webcomponent](https://www.npmjs.com/package/@jamescoyle/svg-icon). See the [README in the repo](https://www.npmjs.com/package/@jamescoyle/svg-icon) for more usage information. 7 | 8 | ### Basic Usage 9 | 10 | 1. Install from NPM 11 | 12 | ```bash 13 | npm install @mdi/js @jamescoyle/svg-icon 14 | ``` 15 | 16 | 2. Import into your project 17 | 18 | Note: The following requires a build tool such as Webpack or Rollup. You could also copy the file into your project and import it directly for a simpler setup. 19 | 20 | ```jsx 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /src/content/getting-started-svelte.md: -------------------------------------------------------------------------------- 1 | # Svelte 2 | 3 | > **Information:** Consider using the [webcomponent version](https://github.com/JamesCoyle/svg-icon) of this component for an icon component that can be used in any modern browser with any framework. 4 | 5 | ## Svelte Icon Component 6 | 7 | [![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svelte-icon)](https://www.npmjs.com/package/@jamescoyle/svelte-icon) 8 | [![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svelte-icon)](https://www.npmjs.com/package/@jamescoyle/svelte-icon) 9 | 10 | MDI can be used in conjunction with the [Svelte Icon Component](https://www.npmjs.com/package/@jamescoyle/svelte-icon). See the [README in the repo](https://www.npmjs.com/package/@jamescoyle/svelte-icon) for more usage information. 11 | 12 | ### Basic Usage 13 | 14 | 1. Install from NPM 15 | 16 | ```bash 17 | npm install @mdi/js @jamescoyle/svelte-icon 18 | ``` 19 | 20 | 2. Import into your project 21 | 22 | ```jsx 23 | 27 | 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /src/api/admin/alias/mock.post.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "4F013652-22DE-48CF-886B-A0FB995E8B41", 3 | "name": "access-point", 4 | "aliases": [ 5 | { "id": "fake1", "name": "test1" }, 6 | { "id": "fake2", "name": "test2" }, 7 | { "id": "fake3", "name": "test3" }, 8 | { "id": "fake4", "name": "test4" }, 9 | { "id": "new1", "name": "new-alias" } 10 | ], 11 | "data": "M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z", 12 | "user": { 13 | "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b", 14 | "name": "Cody" 15 | }, 16 | "commentCount": 0 17 | } -------------------------------------------------------------------------------- /src/assets/docs/bootstrap/helper.css: -------------------------------------------------------------------------------- 1 | .alert.mdi::before, 2 | .breadcrumb .mdi::before, 3 | .btn.mdi::before, 4 | .card-title.mdi::before, 5 | .card-subtitle.mdi::before, 6 | .card-link.mdi::before, 7 | .dropdown-item.mdi::before, 8 | .list-group-item.mdi::before, 9 | .nav-link.mdi::before { 10 | font-size: 1.25em; 11 | line-height: initial; 12 | position: relative; 13 | top: 0.09rem; 14 | } 15 | .alert.mdi::before, 16 | .breadcrumb .mdi:not(:empty)::before, 17 | .btn.mdi:not(:empty)::before, 18 | .card-title.mdi:not(:empty)::before, 19 | .card-subtitle.mdi:not(:empty)::before, 20 | .card-link.mdi:not(:empty)::before, 21 | .dropdown-item.mdi:not(:empty)::before, 22 | .nav-link.mdi:not(:empty)::before { 23 | margin-right: 0.25rem; 24 | } 25 | .list-group-item.mdi:not(:empty)::before { 26 | margin-right: 0.5rem; 27 | } 28 | .dropdown-item.mdi:not(:empty)::before { 29 | margin-left: -0.75rem; 30 | } 31 | .alert.mdi::before, 32 | .list-group-item.mdi:not(:empty)::before { 33 | margin-left: -0.5rem; 34 | } 35 | .modal-title.mdi::before { 36 | font-size: 1.5em; 37 | line-height: 0.5; 38 | position: relative; 39 | top: 0.26rem; 40 | margin-right: 0.5rem; 41 | } -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | }); 13 | TestBed.compileComponents(); 14 | }); 15 | 16 | it('should create the app', async(() => { 17 | let fixture = TestBed.createComponent(AppComponent); 18 | let app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | })); 21 | 22 | it(`should have as title 'app works!'`, async(() => { 23 | let fixture = TestBed.createComponent(AppComponent); 24 | let app = fixture.debugElement.componentInstance; 25 | expect(app.title).toEqual('app works!'); 26 | })); 27 | 28 | it('should render title in a h1 tag', async(() => { 29 | let fixture = TestBed.createComponent(AppComponent); 30 | fixture.detectChanges(); 31 | let compiled = fixture.debugElement.nativeElement; 32 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 33 | })); 34 | }); 35 | -------------------------------------------------------------------------------- /src/app/shared/assignTagModal/assignTagModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | import { delay } from '../delay'; 4 | import { TagService } from '../tag.service'; 5 | import { Package } from '../models/package.model'; 6 | import { Tag } from '../models/tag.model'; 7 | 8 | @Component({ 9 | selector: 'mdi-assign-tag-modal', 10 | templateUrl: './assignTagModal.component.html', 11 | providers: [ 12 | TagService 13 | ] 14 | }) 15 | export class AssignTagModal { 16 | @Input() package: Package; 17 | @ViewChild('inputTag', { static: true }) inputTag: ElementRef; 18 | 19 | constructor( 20 | public activeModal: NgbActiveModal, 21 | private tagService: TagService 22 | ) {} 23 | 24 | public tags: Tag[] = []; 25 | public selectedTag: Tag = null; 26 | 27 | async ngOnInit() { 28 | this.tags = await this.tagService.getTags(this.package.id); 29 | this.selectedTag = this.tags.find(u => u.id == this.tags[0].id); 30 | await delay(); 31 | this.inputTag.nativeElement.focus(); 32 | } 33 | 34 | save() { 35 | this.activeModal.close(this.selectedTag); 36 | } 37 | } -------------------------------------------------------------------------------- /src/site/navMenu/navMenu.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | background: var(--site-color); 4 | padding: 0.5rem; 5 | } 6 | 7 | a { 8 | display: inline-flex; 9 | padding: 0.5rem 0.75rem; 10 | text-decoration: none; 11 | --mdi-icon-color: #fff; 12 | color: #fff; 13 | margin: 0.25rem 0.25rem 0.25rem 0; 14 | border-radius: 0.25rem; 15 | } 16 | a:hover { 17 | background: rgba(0, 0, 0, 0.2); 18 | } 19 | a.active, 20 | a:active, 21 | a:focus { 22 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; 23 | background: rgba(0, 0, 0, 0.3); 24 | } 25 | 26 | a span { 27 | align-self: center; 28 | } 29 | 30 | mdi-icon { 31 | margin-right: 0.25rem; 32 | margin-left: -0.125rem; 33 | align-self: center; 34 | } 35 | 36 | section:not(:first-child) { 37 | margin-top: 0.5rem; 38 | } 39 | section { 40 | margin: 0 -0.5rem 0 -0.5rem; 41 | position: relative; 42 | padding-left: 0.75rem; 43 | } 44 | section::before { 45 | content: ' '; 46 | height: 100%; 47 | width: 0.5rem; 48 | background: rgba(255, 255, 255, 0.2); 49 | position: absolute; 50 | border-radius: 0 0.25rem 0.25rem 0; 51 | left: 0; 52 | } 53 | 54 | aside { 55 | color: #fff; 56 | padding: 0.5rem 1.25rem 0.25rem 1rem; 57 | } -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | Material Design Icons 6 | 7 | Maintained by 8 |  Austin Andrews
@templarian 9 | 10 |
-------------------------------------------------------------------------------- /src/app/shared/models/user.model.ts: -------------------------------------------------------------------------------- 1 | export class User { 2 | 3 | public id: string = null; 4 | public github: string = null; 5 | public twitter: string = null; 6 | public name: string = null; 7 | public base64: string = null; 8 | public iconCount: number = null; 9 | public description: string = null; 10 | public website: string = null; 11 | public sponsored: boolean = false; 12 | public sponsorship: string = ''; 13 | 14 | from(user: User): User { 15 | this.id = user.id; 16 | this.github = user.github; 17 | this.twitter = user.twitter; 18 | this.name = user.name; 19 | if (typeof user.base64 === 'string') { 20 | if (user.base64.match(/^data/)) { 21 | this.base64 = user.base64; 22 | } else { 23 | this.base64 = `data:image/png;base64,${user.base64}`; 24 | } 25 | } 26 | this.iconCount = user.iconCount; 27 | this.description = user.description; 28 | this.website = user.website; 29 | this.sponsored = user.sponsored; 30 | this.sponsorship = `https://github.com/users/${user.github}/sponsorship`; 31 | return this; 32 | } 33 | } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', 'angular-cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-remap-istanbul'), 12 | require('angular-cli/plugins/karma') 13 | ], 14 | files: [ 15 | 16 | ], 17 | preprocessors: { 18 | './src/test.ts': ['angular-cli'] 19 | }, 20 | mime: { 21 | 'text/x-typescript': ['ts','tsx'] 22 | }, 23 | remapIstanbulReporter: { 24 | dir: require('path').join(__dirname, 'coverage'), reports: { 25 | html: 'coverage', 26 | lcovonly: './coverage/coverage.lcov' 27 | } 28 | }, 29 | 30 | reporters: config.angularCli && config.angularCli.codeCoverage 31 | ? ['progress', 'karma-remap-istanbul'] 32 | : ['progress'], 33 | port: 9876, 34 | colors: true, 35 | logLevel: config.LOG_INFO, 36 | autoWatch: true, 37 | browsers: ['Chrome'], 38 | singleRun: false 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /src/app/viewerPage/viewerPage.component.scss: -------------------------------------------------------------------------------- 1 | .edit-on-github { 2 | float: right; 3 | margin-top: -2.25rem; 4 | padding: 0.35rem 0.5rem; 5 | background: #FFF; 6 | border-radius: 0.25rem 0.25rem 0 0; 7 | 8 | a { 9 | display: inline-block; 10 | padding: 1px 6px 2px 6px; 11 | border-radius: 0.15rem; 12 | font-size: 0.875rem; 13 | border: 1px solid rgba(27,31,35,0.2); 14 | color: #24292e; 15 | background-color: #eff3f6; 16 | background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%); 17 | 18 | &:hover { 19 | background-color: #e6ebf1; 20 | background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%); 21 | background-position: -.5em; 22 | border-color: rgba(27,31,35,0.35); 23 | box-shadow: 0 0 3px rgba(2, 117, 216, 0.5); 24 | text-decoration: none; 25 | } 26 | 27 | &:active { 28 | background-color: #e9ecef; 29 | background-image: none; 30 | border-color: rgba(27,31,35,0.35); 31 | box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15); 32 | } 33 | } 34 | } 35 | 36 | :host { 37 | 38 | } -------------------------------------------------------------------------------- /src/app/shared/selectIconModal/selectIconModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | import { delay } from '../../shared/delay'; 4 | import { Icon } from '../models/icon.model'; 5 | import { Package } from '../models/package.model'; 6 | 7 | @Component({ 8 | selector: 'mdi-select-icon-modal', 9 | templateUrl: './selectIconModal.component.html' 10 | }) 11 | export class SelectIconModal { 12 | @Input() packageId: string; 13 | @Input() baseIconId: string = null; 14 | 15 | constructor(public activeModal: NgbActiveModal) {} 16 | 17 | public selectedPackage: Package = null; 18 | public selectedIcon: Icon = null; 19 | 20 | async ngOnInit() { 21 | this.selectedPackage = new Package(this.packageId); 22 | if (this.baseIconId) { 23 | this.selectedIcon = new Icon(); 24 | this.selectedIcon.id = this.baseIconId; 25 | } 26 | } 27 | 28 | selectIcon() { 29 | 30 | } 31 | 32 | save($event) { 33 | this.activeModal.close(this.selectedIcon); 34 | if ($event) { 35 | $event.preventDefault(); 36 | } 37 | } 38 | 39 | clear() { 40 | this.activeModal.close(null); 41 | } 42 | } -------------------------------------------------------------------------------- /src/app/shared/assignUserModal/assignUserModal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild, ElementRef } from '@angular/core'; 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 3 | import { delay } from '../delay'; 4 | import { User } from '../models/user.model'; 5 | import { UserService } from '../user.service'; 6 | import { Package } from '../models/package.model'; 7 | 8 | @Component({ 9 | selector: 'mdi-assign-user-modal', 10 | templateUrl: './assignUserModal.component.html', 11 | providers: [ 12 | UserService 13 | ] 14 | }) 15 | export class AssignUserModal { 16 | @Input() user: User; 17 | @Input() package: Package; 18 | @ViewChild('userInput') userInput: ElementRef; 19 | 20 | constructor( 21 | public activeModal: NgbActiveModal, 22 | private userService: UserService 23 | ) {} 24 | 25 | public users: User[] = []; 26 | public selectedUser: User = null; 27 | 28 | async ngOnInit() { 29 | this.users = await this.userService.getAdminUsers(this.package.id); 30 | this.selectedUser = this.users.find(u => u.id == this.user.id); 31 | await delay(); 32 | this.userInput.nativeElement.focus(); 33 | } 34 | 35 | save() { 36 | this.activeModal.close(this.selectedUser); 37 | } 38 | } -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-nav.md: -------------------------------------------------------------------------------- 1 | ### Navs 2 | 3 | tabs 4 | tab Example 5 | 6 | 20 | 21 | /tab 22 | tab Code 23 | 24 | ```html 25 | 39 | ``` 40 | 41 | /tab 42 | tab Notes 43 | 44 | Official Documentation for Navs 45 | 46 | /tab 47 | /tabs -------------------------------------------------------------------------------- /src/content/and.md: -------------------------------------------------------------------------------- 1 | - and copious amounts of tea 2 | - and people like you 3 | - and a chap in Ireland 4 | - and a friend in Baltimore 5 | - and people that submit issues 6 | - and a friend in Japan 7 | - and that guy that wrote a Chrome extension 8 | - and a friend outside Tampa 9 | - and a friend in Germany 10 | - and fans of Material Design 11 | - and Bond. James Bond. 12 | - and the Power of Grayskull 13 | - and oh my God! They killed Kenny! 14 | - and don’t call me Shirley 15 | - and may the Force be with you! 16 | - in a galaxy far, far away 17 | - – to boldly go where no man has gone before 18 | - and life uh... finds a way 19 | - and it's dangerous to go alone! Take this. 20 | - and a lady in England 21 | - and a mate in England 22 | - people who use Home Assistant 23 | - once upon a time 24 | - since 2014 25 | - and Snake? Snake?! SNAAAAAAAAKE! 26 | - and my Rattata is in the top percentage 27 | - and a spoony bard 28 | - and snakes. Why did it have to be snakes? 29 | - and billions of bilious blue blistering barnacles! 30 | -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-card.md: -------------------------------------------------------------------------------- 1 | ### Cards 2 | 3 | tabs 4 | tab Example 5 | 6 |
7 |
8 |

Card title

9 |
Card subtitle
10 |

You can use inline icons also.

11 | Card link 12 | Another link 13 |
14 |
15 | 16 | /tab 17 | tab Code 18 | 19 | ```html 20 |
21 |
22 |

Card title

23 |
Card subtitle
24 |

You can use inline icons also.

25 | Card link 26 | Another link 27 |
28 |
29 | ``` 30 | 31 | /tab 32 | tab Notes 33 | 34 | Official Documentation for Cards 35 | 36 | /tab 37 | /tabs -------------------------------------------------------------------------------- /src/app/admin/loginPage/loginPage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { LoginService } from '../services/login.service'; 3 | import { Router } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'mdi-admin-login-page', 7 | templateUrl: './loginPage.component.html', 8 | styleUrls: ['./loginPage.component.scss'], 9 | providers: [LoginService] 10 | }) 11 | export class AdminLoginPageComponent { 12 | 13 | user: string = ''; 14 | pass: string = ''; 15 | failed: boolean = false; 16 | isLoginDisabled: boolean = true; 17 | 18 | constructor ( 19 | private loginService: LoginService, 20 | private router: Router 21 | ) { 22 | 23 | } 24 | 25 | async ngOnInit () { 26 | let isAuthed = await this.loginService.isAuthed(); 27 | // Redirect 28 | if (isAuthed) { 29 | console.log('Already logged in... redirecting'); 30 | this.router.navigateByUrl('/admin/index'); 31 | } 32 | } 33 | 34 | async login () { 35 | let isAuth = await this.loginService.login(this.user, this.pass); 36 | if (isAuth) { 37 | this.router.navigateByUrl('/admin/index'); 38 | } else { 39 | this.failed = true; 40 | } 41 | } 42 | 43 | validate () { 44 | this.isLoginDisabled = this.user.length == 0 || this.pass.length == 0; 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /src/api/admin/icon/rename/mock.post.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "4F013652-22DE-48CF-886B-A0FB995E8B41", 3 | "name": "access-point", 4 | "aliases": [ 5 | { 6 | "id": "fake1", 7 | "name": "test1" 8 | }, 9 | { 10 | "id": "fake2", 11 | "name": "test2" 12 | }, 13 | { 14 | "id": "fake3", 15 | "name": "test3" 16 | }, 17 | { 18 | "id": "fake4", 19 | "name": "test4" 20 | } 21 | ], 22 | "data": "M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z", 23 | "user": { 24 | "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b", 25 | "name": "Cody" 26 | }, 27 | "tags": [], 28 | "commentCount": 0 29 | } -------------------------------------------------------------------------------- /src/app/shared/alias.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | 4 | import { Alias } from 'app/shared/models/alias.model'; 5 | import { Icon } from './models/icon.model'; 6 | import { FontVersion } from './models/fontVersion.model'; 7 | 8 | @Injectable() 9 | export class AliasService { 10 | 11 | constructor( 12 | private http: HttpClient 13 | ) { } 14 | 15 | /** 16 | * Assign an alias to an icon. 17 | * 18 | * @param icon Icon that the alias will be assigned 19 | * @param alias Alias 20 | * @param fontVersion Audit Log 21 | */ 22 | async assignAlias(icon: Icon, alias: Alias, fontVersion: FontVersion): Promise { 23 | const body: any = { 24 | icon: { id: icon.id }, 25 | alias: { name: alias.name }, 26 | fontVersion 27 | }; 28 | const res = await this.http.post('/api/admin/icon/alias', body).toPromise(); 29 | return new Icon().from(res); 30 | } 31 | 32 | /** 33 | * Delete an alias from icon. 34 | * 35 | * @param icon Icon to remove alias from 36 | * @param alias Alias 37 | */ 38 | async deleteAlias(icon: Icon, alias: Alias): Promise { 39 | const res = await this.http.delete(`/api/admin/icon/${icon.id}/alias/${alias.id}`).toPromise(); 40 | return new Icon().from(res); 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /src/app/viewerPage/sidebar/sidebar.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | 3 | .more { 4 | padding: .75rem 0; 5 | p { 6 | color: #FFF; 7 | } 8 | ::ng-deep { 9 | svg { 10 | vertical-align: text-top; 11 | margin-right: 0.25rem; 12 | 13 | path { 14 | fill: #FFF; 15 | } 16 | } 17 | } 18 | } 19 | 20 | a { 21 | color: #FFF; 22 | 23 | ::ng-deep { 24 | svg { 25 | vertical-align: middle; 26 | path { 27 | fill: #FFF; 28 | } 29 | } 30 | } 31 | 32 | &.list-group-item { 33 | background: transparent; 34 | border: 1px solid transparent; 35 | border-radius: 4px; 36 | padding-top: 6px; 37 | padding-bottom: 6px; 38 | 39 | &:hover { 40 | color: #FFF; 41 | border: 1px solid rgba(255, 255, 255, 0.2); 42 | } 43 | 44 | &.active { 45 | background: rgba(0, 0, 0, 0.1); 46 | border: 1px solid rgba(255, 255, 255, 0.2); 47 | } 48 | } 49 | 50 | small { 51 | color: rgba(255, 255, 255, 0.7); 52 | } 53 | 54 | } 55 | } -------------------------------------------------------------------------------- /src/site/navDocs/navDocs.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./navDocs.html"; 4 | import style from './navDocs.css'; 5 | import MdiIcon from '@mdi/components/mdi/icon'; 6 | 7 | @Component({ 8 | selector: 'site-nav-docs', 9 | style, 10 | template 11 | }) 12 | export default class SiteNavDocs extends HTMLElement { 13 | @Prop() items: any[] = []; 14 | @Prop() slug: string = ''; 15 | 16 | @Part() $items: HTMLDivElement; 17 | 18 | connectedCallback() { 19 | 20 | } 21 | 22 | render(changes) { 23 | if (changes.items) { 24 | this.items.filter(x => x.type === 'Documentation' && x.name !== 'Documentation').forEach(item => { 25 | if (item.url === '/getting-started') { 26 | return; 27 | } 28 | const a = document.createElement('a'); 29 | a.href = item.url; 30 | const icon = document.createElement('mdi-icon') as MdiIcon; 31 | icon.path = item.icon; 32 | a.appendChild(icon); 33 | const span = document.createElement('span'); 34 | span.innerText = item.name; 35 | a.appendChild(span); 36 | var r = new RegExp(`${location.host}${item.url}(#.*)?$`) 37 | if (location.href.match(r) !== null) { 38 | a.classList.add('active'); 39 | } 40 | this.$items.appendChild(a); 41 | }); 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/app/shared/promiseCache.decorator.ts: -------------------------------------------------------------------------------- 1 | import { PromiseCacheService } from "app/shared/promiseCache.service"; 2 | 3 | export function CacheParam(target: any, propertyKey: string, index: number): void { 4 | const metadataKey = `__cache_${propertyKey}_`; 5 | 6 | Array.isArray(target[metadataKey]) 7 | ? target[metadataKey].push(index) 8 | : target[metadataKey] = [index]; 9 | } 10 | 11 | export function PromiseCache(key?: string): any | Promise { 12 | 13 | return function (target: Function, propertyKey: string, descriptor: TypedPropertyDescriptor): any | Promise { 14 | const method: Function = descriptor.value; 15 | descriptor.value = function(...args: Array): any | Promise { 16 | const className: string = this.constructor.name; 17 | const metadataKey = `__cache_${propertyKey}_`; 18 | const paramKey = args.join('_'); 19 | const fullKey = key || `${className}_${propertyKey}_${paramKey}`; 20 | let promiseCache = PromiseCacheService.getInstance(); 21 | if (promiseCache.has(fullKey)) { 22 | return promiseCache.get(fullKey); 23 | } 24 | if (key) { 25 | promiseCache.map(key, fullKey); 26 | } 27 | return promiseCache.set(fullKey, new Promise(async resolve => { 28 | resolve(method.apply(this, args)); 29 | })); 30 | }; 31 | return descriptor; 32 | }; 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/content/getting-started-svg.md: -------------------------------------------------------------------------------- 1 | # SVG - Getting Started 2 | 3 | Scalable Vector Graphics can be used with the `` or inlined in HTML. SVG is the preferred way consuming the icons for the web. 4 | 5 | For users of NPM we provide all the icons as SVG files in the `@mdi/svg` package. 6 | 7 | ```bash 8 | npm install @mdi/svg 9 | ``` 10 | 11 | ## Image Tag 12 | 13 | The `` HTML element can display SVG files similar to how `PNG`, `JPG`, or `GIF`'s are loaded. 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | ## Inline SVG 20 | 21 | Inlining SVG allows one to include just the icons they need. This is done with the `` and `` elements. 22 | 23 | ```html 24 | 25 | 26 | 27 | ``` 28 | 29 | ### Styling SVG with CSS 30 | 31 | ```css 32 | svg { 33 | width: 24px; 34 | height: 24px; 35 | } 36 | svg path { 37 | fill: red; 38 | } 39 | ``` 40 | 41 | ### Styling SVG with SASS 42 | 43 | ```scss 44 | svg { 45 | width: 24px; 46 | height: 24px; 47 | path { 48 | fill: red; 49 | } 50 | } 51 | ``` 52 | 53 | ### Intro to CSS `em` and `rem` 54 | 55 | Most themes are built around a `1rem` font size equivelent to `16px`. 56 | 57 | Since the icons are natively pixel perfect at `24px` we could use the `width: 1.5rem` for a 24x24 icon size. -------------------------------------------------------------------------------- /src/app/viewerPage/sidebar/sidebar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { ViewerService } from "app/viewerPage/viewerPage.service"; 3 | import { ActivatedRoute, Router } from "@angular/router"; 4 | import { Sidebar } from "app/viewerPage/sidebar/sidebar.model"; 5 | import { SidebarItem } from "app/viewerPage/sidebar/sidebarItem.model"; 6 | 7 | @Component({ 8 | selector: 'mdi-sidebar', 9 | templateUrl: './sidebar.component.html', 10 | styleUrls: ['./sidebar.component.scss'], 11 | providers: [ 12 | ViewerService 13 | ] 14 | }) 15 | export class SidebarComponent { 16 | 17 | sidebar: Sidebar; 18 | url: string; 19 | 20 | constructor(public router: Router, 21 | public route: ActivatedRoute, 22 | private viewerService: ViewerService 23 | ) { 24 | this.url = route.snapshot.url.join('/'); 25 | this.sidebar = new Sidebar(this.url, [ 26 | new SidebarItem("home", "Loading...", "", "", "", []) 27 | ]); 28 | } 29 | 30 | ngOnInit() { 31 | // Render Sidebar 32 | this.viewerService.getSidebar() 33 | .subscribe(sidebars => { 34 | console.log('sidebars:', sidebars); 35 | this.sidebar = sidebars.find(sidebar => sidebar.url === this.url); 36 | }); 37 | } 38 | 39 | isActive(sidebarItem: SidebarItem) { 40 | return sidebarItem.url == this.url && sidebarItem.hash == this.route.snapshot.fragment; 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /src/app/admin/loginPage/loginPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | a ::ng-deep svg { 3 | fill: #FFF; 4 | } 5 | form { 6 | padding: 15px; 7 | label { 8 | display: block; 9 | } 10 | } 11 | .panel-login { 12 | background: #FFF; 13 | padding-bottom: 20px; 14 | box-shadow: 0 1px 3px rgba(0,0,0,0.5); 15 | border-radius: 8px; 16 | margin: 40px 0; 17 | 18 | h2 { 19 | margin-top: 20px; 20 | color: #646464; 21 | } 22 | 23 | .alert { 24 | margin-bottom: 5px; 25 | ::ng-deep { 26 | svg { 27 | vertical-align: middle; 28 | path { 29 | fill: #721c24; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | .panel { 36 | margin: 10px 0 0 0; 37 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 38 | border-radius: 4px; 39 | padding: 15px; 40 | position: relative; 41 | ::ng-deep { 42 | svg { 43 | position: absolute; 44 | left: 15px; 45 | top: 16px; 46 | path { 47 | fill: #AAA; 48 | } 49 | } 50 | } 51 | p { 52 | margin: 0 0 0 30px; 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /src/api/admin/icon/base/mock.post.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "17CE7627-5016-43F9-B42D-AFAAFA0A0564", 3 | "baseIconId": "E76EC23F-AB71-49B3-9173-841544527A20", 4 | "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", 5 | "name": "account-circle-outline", 6 | "description": "Account Circle Outline.", 7 | "data": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z", 8 | "user": { 9 | "name": "Google", 10 | "github": "Google", 11 | "twitter": "Google" 12 | }, 13 | "aliases": [ 14 | { 15 | "id": "207579d6-d3ae-11e8-a666-94188269ec50", 16 | "name": "user-circle-outline" 17 | } 18 | ], 19 | "tags": [ 20 | { 21 | "id": "fe9fa4d9-c43f-11e7-bf5c-94188269ec50", 22 | "name": "Account \/ User", 23 | "url": "user" 24 | } 25 | ], 26 | "fonts": [], 27 | "styles": [ 28 | { 29 | "id": "e1aa40dd-d408-11e8-a666-94188269ec50", 30 | "name": "circle" 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /src/api/admin/icon/style/mock.post.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "17CE7627-5016-43F9-B42D-AFAAFA0A0564", 3 | "baseIconId": "E76EC23F-AB71-49B3-9173-841544527A20", 4 | "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", 5 | "name": "account-circle-outline", 6 | "description": "Account Circle Outline.", 7 | "data": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z", 8 | "user": { 9 | "name": "Google", 10 | "github": "Google", 11 | "twitter": "Google" 12 | }, 13 | "aliases": [ 14 | { 15 | "id": "207579d6-d3ae-11e8-a666-94188269ec50", 16 | "name": "user-circle-outline" 17 | } 18 | ], 19 | "tags": [ 20 | { 21 | "id": "fe9fa4d9-c43f-11e7-bf5c-94188269ec50", 22 | "name": "Account \/ User", 23 | "url": "user" 24 | } 25 | ], 26 | "fonts": [], 27 | "styles": [ 28 | { 29 | "id": "e1aa40dd-d408-11e8-a666-94188269ec50", 30 | "name": "circle" 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /src/app/shared/models/modification.model.ts: -------------------------------------------------------------------------------- 1 | import { Icon } from "app/shared/models/icon.model"; 2 | import { User } from "app/shared/models/user.model"; 3 | import { ModificationType } from "app/shared/enums/modificationType.enum"; 4 | 5 | export class Modification { 6 | 7 | public id: string; 8 | public modificationId: ModificationType; 9 | public packageId: string; 10 | public user: User; 11 | public icon: Icon; 12 | public iconNameBefore: string; 13 | public iconNameAfter: string; 14 | public iconDataBefore: string; 15 | public iconDataAfter: string; 16 | public text: string; 17 | public date: Date; 18 | public issue: number; 19 | public isVisible: boolean; 20 | 21 | constructor ( 22 | ) { } 23 | 24 | from(modification: Modification): Modification { 25 | this.id = modification.id; 26 | this.modificationId = modification.modificationId; 27 | this.packageId = modification.packageId; 28 | this.user = new User().from(modification.user); 29 | this.icon = new Icon().from(modification.icon); 30 | this.iconNameBefore = modification.iconNameBefore; 31 | this.iconNameAfter = modification.iconNameAfter; 32 | this.iconDataBefore = modification.iconDataBefore; 33 | this.iconDataAfter = modification.iconDataAfter; 34 | this.text = modification.text; 35 | this.date = modification.date; 36 | this.issue = modification.issue; 37 | this.isVisible = modification.isVisible; 38 | return this; 39 | } 40 | 41 | } -------------------------------------------------------------------------------- /src/app/viewerPage/sidebar/sidebar.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | {{item.text}} 6 | 7 | 8 | 10 | 11 | {{subItem.text}} 12 | 13 | 14 | 15 |
16 |
17 |

Please help us improve the documentation by editing on GitHub.

18 |
19 | 20 | 21 | View Docs 22 | 23 | 24 | 25 | Add Document 26 | 27 |
28 |
-------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-dropdown.md: -------------------------------------------------------------------------------- 1 | ### Dropdowns 2 | 3 | tabs 4 | tab Example 5 | 6 |
7 | 8 |
9 | Action 10 | Another action 11 | Something else here 12 |
13 |
14 | 15 | /tab 16 | tab Code 17 | 18 | ```html 19 |
20 | 23 |
24 | Action 25 | Another action 26 | Something else here 27 |
28 |
29 | ``` 30 | 31 | /tab 32 | tab Notes 33 | 34 | Official Documentation for Dropdowns 35 | 36 | /tab 37 | /tabs -------------------------------------------------------------------------------- /src/site/pageIcons/pageIcons.css: -------------------------------------------------------------------------------- 1 | [part="container"] { 2 | display: grid; 3 | grid-template-columns: calc(300px + 1.5rem) auto; 4 | } 5 | 6 | aside { 7 | padding: 1rem 0 1rem 1rem; 8 | grid-column: 1; 9 | } 10 | 11 | aside section { 12 | margin-left: -1rem; 13 | border-radius: 0 0.5rem 0.5rem 0; 14 | padding: 0.25rem 1rem 0.75rem 1rem; 15 | margin-top: 1rem; 16 | background: #f1f1f1; 17 | box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.2) inset; 18 | } 19 | 20 | aside section mdi-button-link { 21 | --mdi-button-background-color: transparent; 22 | --mdi-button-padding: 0.5rem; 23 | margin-bottom: 0.5rem; 24 | } 25 | 26 | aside section mdi-button-link mdi-icon { 27 | margin-right: 0.5rem; 28 | } 29 | 30 | main { 31 | grid-column: 2; 32 | padding: 1rem; 33 | } 34 | 35 | [part="search"] { 36 | margin-top: 1rem; 37 | } 38 | 39 | .seperator { 40 | display: flex; 41 | padding: 0.75rem 0; 42 | justify-items: center; 43 | align-items: center; 44 | cursor: default; 45 | } 46 | 47 | .seperator::before { 48 | content: ' '; 49 | border-top: 1px solid rgba(69, 60, 79, 0.75); 50 | height: 0; 51 | flex: 1; 52 | margin-bottom: -1px; 53 | } 54 | 55 | .seperator::after { 56 | content: ' '; 57 | border-top: 1px solid rgba(69, 60, 79, 0.75); 58 | height: 0; 59 | flex: 1; 60 | margin-bottom: -1px; 61 | } 62 | 63 | .seperator span { 64 | padding: 0.25rem 0.5rem; 65 | color: rgba(69, 60, 79, 0.9); 66 | border-radius: 0.5rem; 67 | flex: 1; 68 | white-space: nowrap; 69 | } -------------------------------------------------------------------------------- /src/content/getting-started-vuejs.md: -------------------------------------------------------------------------------- 1 | Consider using the [webcomponent version](https://github.com/JamesCoyle/svg-icon) of this component for an icon component that can be used in any modern browser with any framework. 2 | 3 | # Vue Icon Component 4 | 5 | [![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/vue-icon)](https://www.npmjs.com/package/@jamescoyle/vue-icon) 6 | [![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/vue-icon)](https://www.npmjs.com/package/@jamescoyle/vue-icon) 7 | 8 | MDI can be used in conjunction with the [Vue Icon Component](https://www.npmjs.com/package/@jamescoyle/vue-icon). See the [README in the repo](https://www.npmjs.com/package/@jamescoyle/vue-icon) for more usage information. 9 | 10 | # Basic Usage 11 | 12 | 1. Install from NPM 13 | ``` 14 | npm install @mdi/js @jamescoyle/vue-icon 15 | ``` 16 | 17 | 2. Import into your project 18 | ``` 19 | import SvgIcon from '@jamescoyle/vue-icon' 20 | import { mdiAccount } from '@mdi/js' 21 | ``` 22 | 23 | ## SFC Example 24 | The following example shows how you might use an icon within a single file component. 25 | 26 | ``` 27 | 30 | 31 | 32 | 50 | ``` 51 | -------------------------------------------------------------------------------- /src/site/pageHistory/pageHistory.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

History

5 |
6 | 31 | 32 |
33 |

Loading...

34 |
35 | 36 |
37 |

Unable to load modification list

38 |
39 | 40 |
41 |

No Audit Items Found

42 |

Modify filters in the sidebar.

43 |
44 | 45 |
46 | 47 | Load More 48 |
49 |
-------------------------------------------------------------------------------- /src/api/admin/icon/17CE7627-5016-43F9-B42D-AFAAFA0A0564/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "17CE7627-5016-43F9-B42D-AFAAFA0A0564", 3 | "baseIconId": "E76EC23F-AB71-49B3-9173-841544527A20", 4 | "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", 5 | "name": "account-circle-outline", 6 | "description": "Account Circle Outline.", 7 | "data": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z", 8 | "user": { 9 | "name": "Google", 10 | "github": "Google", 11 | "twitter": "Google" 12 | }, 13 | "aliases": [ 14 | { 15 | "id": "207579d6-d3ae-11e8-a666-94188269ec50", 16 | "name": "user-circle-outline" 17 | } 18 | ], 19 | "tags": [ 20 | { 21 | "id": "fe9fa4d9-c43f-11e7-bf5c-94188269ec50", 22 | "name": "Account \/ User", 23 | "url": "user" 24 | } 25 | ], 26 | "fonts": [], 27 | "styles": [ 28 | { 29 | "id": "e1aa40dd-d408-11e8-a666-94188269ec50", 30 | "name": "circle" 31 | }, 32 | { 33 | "id": "bb5d615c-d404-11e8-a666-94188269ec50", 34 | "name": "outline" 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /src/app/shared/tag.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpParams } from '@angular/common/http'; 3 | 4 | import { Tag } from 'app/shared/models/tag.model'; 5 | import { PromiseCacheService } from 'app/shared/promiseCache.service'; 6 | import { PromiseCache, CacheParam } from 'app/shared/promiseCache.decorator'; 7 | import { Icon } from './models/icon.model'; 8 | 9 | @Injectable() 10 | export class TagService { 11 | 12 | constructor( 13 | private http: HttpClient, 14 | private promiseCacheService: PromiseCacheService 15 | ) { } 16 | 17 | @PromiseCache() 18 | async getTag(@CacheParam tagId: string): Promise { 19 | return await this.http.get('/api/tag/' + tagId).toPromise(); 20 | } 21 | 22 | async getTags(packageId: string): Promise { 23 | return await this.http.get('/api/tag/' + packageId).toPromise(); 24 | } 25 | 26 | async getAdminTags(packageId: string): Promise { 27 | let res = await this.http.get('/api/admin/tag/' + packageId).toPromise(); 28 | return res.map(t => new Tag().from(t)); 29 | } 30 | 31 | async assignTag(icon: Icon, tag: Tag): Promise { 32 | let res = await this.http.post('/api/admin/icon/tag', { 33 | icon: { id: icon.id }, 34 | tag: { id: tag.id } 35 | }).toPromise(); 36 | return new Icon().from(res); 37 | } 38 | 39 | async deleteTag(icon: Icon, tag: Tag): Promise { 40 | let res = await this.http.delete(`/api/admin/icon/${icon.id}/tag/${tag.id}`).toPromise(); 41 | return new Icon().from(res); 42 | } 43 | 44 | } -------------------------------------------------------------------------------- /src/app/admin/releasePage/releasePage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .step { 3 | background: #F1F1F1; 4 | font-weight: bold; 5 | display: inline-block; 6 | border-radius: 50%; 7 | width: 4rem; 8 | height: 4rem; 9 | line-height: 4rem; 10 | text-align: center; 11 | color: #444; 12 | } 13 | .icon-list { 14 | display: flex; 15 | border-bottom: 1px solid #DDD; 16 | .icon { 17 | border: 1px solid #DDD; 18 | border-radius: 0.25rem; 19 | align-self: center; 20 | width: 2rem; 21 | height: 2rem; 22 | margin-left: -0.5rem; 23 | margin-right: 0.5rem; 24 | svg { 25 | fill: #444; 26 | } 27 | } 28 | .name { 29 | flex: 1; 30 | align-self: center; 31 | } 32 | .codepoint { 33 | padding-right: 0.5rem; 34 | input { 35 | width: 5rem; 36 | font-family: 'Consolas', 'Courier New', Courier, monospace; 37 | } 38 | } 39 | } 40 | .preview { 41 | border: 1px solid rgba(0, 0, 0, 0.15); 42 | border-radius: 0.25rem; 43 | margin-right: 5px; 44 | padding: 5px 8px; 45 | vertical-align: top; 46 | display: inline-block; 47 | svg { 48 | width: 24px; 49 | height: 24px; 50 | vertical-align: middle; 51 | 52 | path { 53 | fill: #646464; 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/app/contributorsPage/contributorsPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | 3 | .seperator { 4 | background: #414F56; 5 | margin-left: -1.3rem; 6 | margin-right: -1.3rem; 7 | 8 | &:before { 9 | display: block; 10 | content: ' '; 11 | height: 0.25rem; 12 | border-radius: 0 0 0.25rem 0.25rem; 13 | background: #FFF; 14 | margin-bottom: 0.25rem; 15 | } 16 | 17 | &:after { 18 | display: block; 19 | content: ' '; 20 | height: 0.25rem; 21 | border-radius: 0.25rem 0.25rem 0 0; 22 | background: #FFF; 23 | } 24 | } 25 | 26 | blockquote { 27 | padding: 20px 26px 20px 20px; 28 | position: relative; 29 | margin-bottom: 0; 30 | font-size: 18px; 31 | text-align: justify; 32 | 33 | &::before { 34 | content: '“'; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | font-size: 48px; 39 | font-family: sans-serif; 40 | color: #646464; 41 | } 42 | &::after { 43 | content: '”'; 44 | position: absolute; 45 | right: 6px; 46 | bottom: -0.5rem; 47 | font-size: 48px; 48 | font-family: sans-serif; 49 | color: #646464; 50 | } 51 | } 52 | 53 | h2 { 54 | margin-bottom: 10px; 55 | font-weight: 300; 56 | color: #222; 57 | } 58 | 59 | h2:not(:first-child) { 60 | margin-top: 10px; 61 | } 62 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | **ARCHIVED:** Moved to https://github.com/Pictogrammers/Icon-Site 3 | 4 | ----------------- 5 | 6 | # Material Design Icons - Site 7 | 8 | The [Material Design Icons](https://materialdesignicons.com) project has been growing pretty quickly over the years and now has a large community behind it and is need of a new site. 9 | 10 | ## Tech Stack 11 | 12 | The public site and admin use two different tech stacks. 13 | 14 | - Public Site: TypeScript, Web Components 15 | - Admin: TypeScript, Angular, ngAngular (Bootstrap 4) 16 | 17 | ## Running Site Locally 18 | 19 | ``` 20 | npm install 21 | 22 | # Public Site 23 | npm run start:site 24 | ``` 25 | 26 | The browser will launch... 27 | 28 | ## Running Admin Locally 29 | 30 | Clone the project and install `angular-cli` globally. This will handle running the Angular project. 31 | 32 | ``` 33 | npm install angular-cli --global 34 | npm install 35 | 36 | # Admin Site 37 | ng serve 38 | ``` 39 | 40 | ## Goals 41 | 42 | - Modern Browser support only (developer focused resource). 43 | - Fully responsive design. 44 | - Fast loading. 45 | - Load only required icons. 46 | - Minify all source. 47 | - Scrolling only renders SVG files in view. 48 | - View icons by version of release. 49 | - Separate help guides for each framework. 50 | - Resource page 51 | - Each icon has a unique page. 52 | - Cleanly integrate the advanced export. 53 | - Contributor pages editable by contributors. 54 | - Emoji ranking on icons that may need a revision. 55 | - Suggest an alias. 56 | - More robust tagging of icons. 57 | 58 | ## API Endpoints 59 | 60 | To view all the documented endpoints please open `src/content/api.md`. 61 | -------------------------------------------------------------------------------- /src/app/iconPage/iconPage.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | mdi-banner { 3 | padding: 2rem 0 3rem 0; 4 | } 5 | h1 { 6 | color: #FFF; 7 | } 8 | div.preview { 9 | width: 280px; 10 | height: 280px; 11 | background: url('/assets/resources/icon-grid.svg') #F1F1F1; 12 | border-radius: 8px 8px 0 0; 13 | 14 | svg { 15 | margin: 20px; 16 | width: calc(100% - 40px); 17 | height: calc(100% - 40px); 18 | 19 | path { 20 | fill: #646464; 21 | } 22 | } 23 | 24 | img { 25 | width: 240px; 26 | height: 240px; 27 | margin: 20px; 28 | image-rendering: pixelated; 29 | } 30 | } 31 | div.aliases { 32 | margin-top: -1.75rem; 33 | margin-bottom: 1rem; 34 | color: #FFF; 35 | span > span { 36 | background: rgba(0, 0, 0, 0.1); 37 | border-radius: 0.25rem; 38 | padding: 0.25rem 0.5rem; 39 | } 40 | .btn { 41 | padding: 0.25rem 0.5rem; 42 | line-height: 1rem; 43 | margin-top: -0.35rem; 44 | margin-left: 0.5rem; 45 | } 46 | } 47 | div.tags { 48 | span > span { 49 | padding: 0 0.25rem; 50 | border-radius: 0.25rem; 51 | background: #EEE; 52 | } 53 | } 54 | .description { 55 | position: relative; 56 | .edit { 57 | position: absolute; 58 | display: inline-block; 59 | top: 0.5rem; 60 | right: 0.5rem; 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/site/pageView/pageView.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

...

4 |
5 | 6 | 22 |
23 | 24 |
25 |
26 | -------------------------------------------------------------------------------- /src/site/pageHome/pageHome.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./pageHome.html"; 4 | import style from './pageHome.css'; 5 | 6 | import '@mdi/components/mdi/icon'; 7 | import MdiIcon from '@mdi/components/mdi/icon'; 8 | import { Icon } from '@mdi/components/mdi/shared/models/icon'; 9 | 10 | @Component({ 11 | selector: 'site-page-home', 12 | style, 13 | template 14 | }) 15 | export default class SitePageHome extends HTMLElement { 16 | @Prop() icons: Icon[] = []; 17 | @Prop() navigationItems: any[] = []; 18 | 19 | @Part() $animation: HTMLDivElement; 20 | @Part() $animation1: MdiIcon; 21 | @Part() $animation2: MdiIcon; 22 | @Part() $animation3: MdiIcon; 23 | @Part() $animation4: MdiIcon; 24 | @Part() $animation5: MdiIcon; 25 | @Part() $animation6: MdiIcon; 26 | @Part() $animation7: MdiIcon; 27 | @Part() $animation8: MdiIcon; 28 | @Part() $animation9: MdiIcon; 29 | @Part() $animation10: MdiIcon; 30 | 31 | get animations() { 32 | return [ 33 | this.$animation1, 34 | this.$animation2, 35 | this.$animation3, 36 | this.$animation4, 37 | this.$animation5, 38 | this.$animation6, 39 | this.$animation7, 40 | this.$animation8, 41 | this.$animation9, 42 | this.$animation10 43 | ]; 44 | } 45 | 46 | render(changes) { 47 | if (changes.icons && this.icons.length) { 48 | var count = this.icons.length; 49 | this.animations.forEach(animation => { 50 | var i = Math.floor(Math.random() * Math.floor(count - 1)); 51 | animation.path = this.icons[i].data || ''; 52 | }); 53 | this.$animation.classList.add('animate'); 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /src/app/admin/basePage/basePage.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 12 |
13 |
14 |

Base Icon List

15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
NO BASE ICONS:
29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 |
40 | -------------------------------------------------------------------------------- /src/content/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | > **Information:** icon:information-outline Material Design Icons has been around for many years and is compatible with many technologies and frameworks. Please view the docs menu at the top for an appropriate getting started guide. 4 | 5 | ## Using the Webfont 6 | 7 | One of the easiest ways to access all of our icons is to use the webfont. For testing or quick use you can include the CSS file from the CDN. You could also download the files via NPM to include in your project. 8 | 9 | Learn More (Webfont - Getting Started) 10 | 11 | > **Danger:** Using the webfont while easy to use is highly discouraged due to performance and overall request size. Please read the [Webfont Alternatives Guide](/guide/webfont-alternatives) for more details. 12 | 13 | 14 | ## Using SVGs 15 | 16 | All of our icons are available as an SVG. 17 | 18 | 19 | ### As an Image File 20 | 21 | SVGs can be downloaded individually and included the same way as any bitmap image: 22 | 23 | ```html 24 | An example icon 25 | ``` 26 | 27 | ### Inline SVG 28 | 29 | SVG's can be used inline in the HTML. 30 | 31 | ```html 32 | 33 | 34 | 35 | ``` 36 | 37 | Inline SVGs can also be overlayed by adding additional paths. 38 | 39 | ```html 40 | 41 | 42 | 43 | 44 | ``` 45 | -------------------------------------------------------------------------------- /src/api/admin/font/version/8c70e3fd-a857-11e9-aab8-94188269ec50/mock.get.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "B3497A75-EE3B-4A8A-8F27-39A458423659", 4 | "name": "baby-bottle", 5 | "data": "M11.28 2.8L10.78 3.3A5.5 5.5 0 0 0 6.41 2.87L6.33 2.8A2.5 2.5 0 0 0 2.8 6.33L2.87 6.41A5.5 5.5 0 0 0 3.3 10.78L2.8 11.28A1.5 1.5 0 0 0 2.8 13.4L4.21 14.82A1.5 1.5 0 0 0 6.33 14.82L6.68 14.46L13.76 21.53A1.5 1.5 0 0 0 15.88 21.53L21.53 15.88A1.5 1.5 0 0 0 21.53 13.76L14.46 6.68L14.82 6.33A1.5 1.5 0 0 0 14.82 4.21L13.4 2.8A1.5 1.5 0 0 0 11.28 2.8M13.76 5.27L5.27 13.76L3.86 12.34L12.34 3.86M14.82 11.63L11.63 14.82L10.57 13.76L13.76 10.57M16.94 13.76L13.76 16.94L12.69 15.88L15.88 12.69Z", 6 | "codepoint": "FF56" 7 | }, 8 | { 9 | "id": "5E06191D-D9AC-412E-B21B-C3AF1F28D76F", 10 | "name": "baby-bottle-outline", 11 | "data": "M11.28 2.8L10.78 3.3C9.44 2.55 7.84 2.4 6.41 2.87L6.33 2.8C5.36 1.82 3.77 1.82 2.8 2.8S1.82 5.36 2.8 6.33L2.87 6.41C2.4 7.84 2.55 9.44 3.3 10.78L2.8 11.28C2.21 11.87 2.21 12.81 2.8 13.4L4.21 14.82C4.8 15.4 5.74 15.4 6.33 14.82L6.68 14.46L13.76 21.53C14.34 22.12 15.29 22.12 15.88 21.53L21.53 15.88C22.12 15.29 22.12 14.34 21.53 13.75L14.46 6.68L14.82 6.33C15.4 5.74 15.4 4.8 14.82 4.21L13.4 2.79C12.82 2.21 11.87 2.21 11.28 2.8M4.25 7.05C4.33 6.71 4.47 6.38 4.66 6.07L3.86 5.27C3.75 5.16 3.67 5.04 3.63 4.9C3.5 4.56 3.57 4.14 3.86 3.86S4.56 3.5 4.9 3.63C5.04 3.67 5.16 3.75 5.27 3.86L6.07 4.66C6.38 4.47 6.71 4.33 7.05 4.25C7.91 4 8.83 4.06 9.65 4.42L4.42 9.65C4.06 8.83 4 7.91 4.25 7.05M20.47 14.82L14.82 20.47L7.75 13.4L13.4 7.75L20.47 14.82M13.76 5.27L5.27 13.76L3.86 12.34L12.34 3.86L13.76 5.27M14.82 11.63L11.63 14.82L10.57 13.76L13.76 10.57L14.82 11.63M16.94 13.76L13.76 16.94L12.69 15.88L15.88 12.69L16.94 13.76Z", 12 | "codepoint": "FF57" 13 | } 14 | ] -------------------------------------------------------------------------------- /src/content/guide-iconify.md: -------------------------------------------------------------------------------- 1 | # Iconify Guide 2 | 3 | Iconify is an open source alternative to web font. 4 | 5 | It works similar to web font, but with few differences: 6 | * Icons are rendered as SVG, not as glyphs. 7 | * Iconify only downloads icons that are used on website instead of loading entire font. 8 | * Instead of loading font you need to load small JavaScript file. 9 | 10 | That makes Iconify easy to use with large icon sets, such as Material Design. 11 | 12 | To use Material Design icons with Iconify add Iconify script tag to header or footer of your page: 13 | 14 | ```html 15 | 16 | ``` 17 | 18 | See [Iconify.design](https://iconify.design) for latest script link. 19 | 20 | ## Adding icons 21 | 22 | To add any icon to page write a placeholder HTML code: 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | That's all there is to it. Iconify will replace it with SVG. 29 | 30 | ## Icons list 31 | 32 | Iconify icons set is updated within 24 hours after Material Design SVG repository is updated. 33 | 34 | You can find list of supported icons on [Iconify MDI collection page](https://iconify.design/icon-sets/mdi/). 35 | 36 | ## Transformations and other options 37 | 38 | If you click any icon in icons list mentioned above, Iconify will show you different code options and links to tutorials. For example, see [mdi-account icon page](https://iconify.design/icon-sets/mdi/account.html). 39 | 40 | ## Self hosted option 41 | 42 | Iconify fetches icons from Iconify API servers. But what if you want to host everything on your own servers? You can host your own Iconify API. See [Iconify API hosting documentation](https://iconify.design/docs/api-hosting/). 43 | -------------------------------------------------------------------------------- /src/site/navMenu/navMenu.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./navMenu.html"; 4 | import style from './navMenu.css'; 5 | import MdiIcon from '@mdi/components/mdi/icon'; 6 | 7 | const menuCategories = [ 8 | 'Guides', 9 | 'Contribute', 10 | 'Meta' 11 | ]; 12 | 13 | @Component({ 14 | selector: 'site-nav-menu', 15 | style, 16 | template 17 | }) 18 | export default class SiteNavMenu extends HTMLElement { 19 | @Prop() items: any[] = []; 20 | @Prop() slug: string = ''; 21 | 22 | @Part() $items: HTMLDivElement; 23 | 24 | connectedCallback() { 25 | 26 | } 27 | 28 | render(changes) { 29 | if (changes.items) { 30 | const sections = {}; 31 | this.items.filter(x => menuCategories.includes(x.type)).forEach(item => { 32 | console.log(item.type, sections) 33 | if (!sections[item.type]) { 34 | const section = document.createElement('section'); 35 | sections[item.type] = section; 36 | const aside = document.createElement('aside'); 37 | aside.innerText = item.type; 38 | section.appendChild(aside); 39 | this.$items.appendChild(section); 40 | } 41 | const a = document.createElement('a'); 42 | a.href = item.url; 43 | const icon = document.createElement('mdi-icon') as MdiIcon; 44 | icon.path = item.icon; 45 | a.appendChild(icon); 46 | const span = document.createElement('span'); 47 | span.innerText = item.name; 48 | a.appendChild(span); 49 | var r = new RegExp(`${location.host}${item.url}(#.*)?$`) 50 | if (location.href.match(r) !== null) { 51 | a.classList.add('active'); 52 | } 53 | sections[item.type].appendChild(a); 54 | }); 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/content/getting-started-angularjs.md: -------------------------------------------------------------------------------- 1 | # AngularJS - Getting Started 2 | 3 | In AngularJS you will want to use a method that cleanly inserts [SVG](./svg) inline. 4 | 5 | ## Standalone Directive 6 | 7 | If you need a standalone directive we suggest using the one below. 8 | 9 | tabs Standalone 10 | tab Usage 11 | 12 | ```html 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | ```javascript 20 | angular.module('app', ['mdi']) 21 | .controller('exampleController', [ 22 | 'mdiService', 23 | function (mdiService) { 24 | // Individually 25 | mdiService.add('account', 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'); 26 | // or in the config 27 | } 28 | ]) 29 | ``` 30 | 31 | /tab 32 | tab mdi.js 33 | 34 | ```javascript 35 | import:/assets/docs/angularjs/mdi.js 36 | ``` 37 | 38 | /tab 39 | /tabs 40 | 41 | ## Frameworks 42 | 43 | Some frameworks have specific implementations for using iconography as shown below. 44 | 45 | ### Angular Material 46 | 47 | The [`mdi.svg`](https://materialdesignicons.com/api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B) file contains all the icons provided on the site. Use inline with $mdIconProvider. 48 | 49 | ```javascript 50 | app.config(function($mdIconProvider) { 51 | $mdIconProvider 52 | .defaultIconSet('my/app/mdi.svg') 53 | }); 54 | ``` 55 | 56 | ```html 57 | 58 | 59 | 60 | 61 | ``` 62 | -------------------------------------------------------------------------------- /src/api/admin/package/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/mock.get.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [ 3 | { 4 | "id": "E76EC23F-AB71-49B3-9173-841544527A20", 5 | "baseIconId": "E76EC23F-AB71-49B3-9173-841544527A20", 6 | "name": "account", 7 | "description": "Mock description", 8 | "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z", 9 | "user": { 10 | "id": "a8a312b6-07e4-11e4-bf19-842b2b6cfe1b", 11 | "name": "Google" 12 | }, 13 | "aliases": [], 14 | "tags": [], 15 | "styles": [], 16 | "commentCount": 0 17 | }, 18 | { 19 | "id": "17CE7627-5016-43F9-B42D-AFAAFA0A0564", 20 | "baseIconId": "E76EC23F-AB71-49B3-9173-841544527A20", 21 | "name": "account-circle-outline", 22 | "description": "Mock description", 23 | "data": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z", 24 | "user": { 25 | "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b", 26 | "name": "Austin Andrews" 27 | }, 28 | "aliases": [], 29 | "tags": [], 30 | "styles": [], 31 | "commentCount": 0 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/api/style/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B/mock.get.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "e526737f-d404-11e8-a666-94188269ec50", 4 | "name": "alert", 5 | "count": 0 6 | }, 7 | { 8 | "id": "e5267a03-d404-11e8-a666-94188269ec50", 9 | "name": "arrow", 10 | "count": 0 11 | }, 12 | { 13 | "id": "d3b6ec52-d404-11e8-a666-94188269ec50", 14 | "name": "bold", 15 | "count": 0 16 | }, 17 | { 18 | "id": "e1aa40dd-d408-11e8-a666-94188269ec50", 19 | "name": "circle", 20 | "count": 1 21 | }, 22 | { 23 | "id": "fd76793f-d404-11e8-a666-94188269ec50", 24 | "name": "minus", 25 | "count": 0 26 | }, 27 | { 28 | "id": "1599efa7-d405-11e8-a666-94188269ec50", 29 | "name": "multiple", 30 | "count": 0 31 | }, 32 | { 33 | "id": "f15c647e-d404-11e8-a666-94188269ec50", 34 | "name": "network", 35 | "count": 0 36 | }, 37 | { 38 | "id": "bb5d67eb-d404-11e8-a666-94188269ec50", 39 | "name": "off", 40 | "count": 0 41 | }, 42 | { 43 | "id": "bb5d615c-d404-11e8-a666-94188269ec50", 44 | "name": "outline", 45 | "count": 1 46 | }, 47 | { 48 | "id": "fd767237-d404-11e8-a666-94188269ec50", 49 | "name": "plus", 50 | "count": 0 51 | }, 52 | { 53 | "id": "1599e8d2-d405-11e8-a666-94188269ec50", 54 | "name": "question", 55 | "count": 0 56 | }, 57 | { 58 | "id": "08af8e5f-d405-11e8-a666-94188269ec50", 59 | "name": "remove", 60 | "count": 0 61 | }, 62 | { 63 | "id": "08af95d5-d405-11e8-a666-94188269ec50", 64 | "name": "search", 65 | "count": 0 66 | }, 67 | { 68 | "id": "f15c6be2-d404-11e8-a666-94188269ec50", 69 | "name": "settings", 70 | "count": 0 71 | }, 72 | { 73 | "id": "d3b6f23d-d404-11e8-a666-94188269ec50", 74 | "name": "thick", 75 | "count": 0 76 | }, 77 | { 78 | "id": "1b1a5026-d405-11e8-a666-94188269ec50", 79 | "name": "variant", 80 | "count": 0 81 | } 82 | ] -------------------------------------------------------------------------------- /src/site/pageGithub/utils.ts: -------------------------------------------------------------------------------- 1 | export async function getGitHubPreview(name, data, isWorkInProgress: boolean, action: string = 'none'): Promise { 2 | return new Promise(async (resolve, reject) => { 3 | let color: string = isWorkInProgress ? 'FFF' : '8B8B8B'; 4 | let paths = [ 5 | getIconSvgPath(data, 11, 10, 1), 6 | getIconSvgPath(data, 11, 44, 2), 7 | getIconSvgPath(data, 70, 10, 10) 8 | ]; 9 | const width = 325, 10 | height = 294; 11 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 12 | svg.setAttribute('viewBox', `0 0 ${width} ${height}`); 13 | paths.forEach((path, i) => { 14 | path.setAttribute('d', data); 15 | path.setAttribute('fill', `#${color}`); 16 | svg.appendChild(path); 17 | }); 18 | const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 19 | text.setAttribute('transform', 'translate(11, 283)'); 20 | text.setAttribute('fill', '#555'); 21 | text.style.fontFamily = 'Segoe UI,Roboto,Arial'; 22 | text.style.fontSize = '12pt'; 23 | text.textContent = name; 24 | svg.appendChild(text); 25 | resolve(await getPngFromSvg(svg)); 26 | }); 27 | } 28 | 29 | async function getPngFromSvg(svgElement: SVGSVGElement): Promise { 30 | return new Promise((resolve, reject) => { 31 | var svg = new XMLSerializer().serializeToString(svgElement); 32 | var img = new Image(); 33 | img.onload = function () { 34 | resolve(img); 35 | }; 36 | img.src = `data:image/svg+xml; charset=utf8, ${encodeURIComponent(svg)}`; 37 | }); 38 | } 39 | 40 | function getIconSvgPath(data, x, y, scale): SVGPathElement { 41 | const ns = 'http://www.w3.org/2000/svg', 42 | path = document.createElementNS(ns, 'path'); 43 | path.setAttribute('d', data); 44 | path.setAttribute('transform', `translate(${x},${y}) scale(${scale},${scale})`) 45 | return path; 46 | } -------------------------------------------------------------------------------- /src/site/pageContributors/pageContributors.ts: -------------------------------------------------------------------------------- 1 | import { Component, Prop, Part } from '@mdi/element'; 2 | 3 | import template from "./pageContributors.html"; 4 | import style from './pageContributors.css'; 5 | 6 | import { Icon } from '@mdi/components/mdi/shared/models/icon'; 7 | import { http } from '@mdi/components/mdi/shared/http'; 8 | import { User } from '@mdi/components/mdi/shared/models/user'; 9 | import '@mdi/components/mdi/cardUser'; 10 | import MdiCardUser from '@mdi/components/mdi/cardUser'; 11 | 12 | @Component({ 13 | selector: 'site-page-contributors', 14 | style, 15 | template 16 | }) 17 | export default class SitePageContributors extends HTMLElement { 18 | @Prop() icons: Icon[] = []; 19 | @Prop() navigationItems: any[] = []; 20 | 21 | @Part() $header: HTMLHeadingElement; 22 | @Part() $loading: HTMLDivElement; 23 | @Part() $error: HTMLDivElement; 24 | @Part() $main: HTMLDivElement; 25 | @Part() $core: HTMLDivElement; 26 | @Part() $community: HTMLDivElement; 27 | 28 | connectedCallback() { 29 | this.load(); 30 | } 31 | 32 | async load() { 33 | const packageId = '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B'; 34 | const users = (await http.get(`api/package/${packageId}/user`)).map(user => new User().from(user));; 35 | const { error } = users as any; 36 | this.$loading.style.display = 'none'; 37 | if (error) { 38 | this.$error.style.display = 'block'; 39 | } else { 40 | users.filter(u => u.core && (u.iconCount || 0) > 0).forEach(user => { 41 | this.addUser(this.$core, user); 42 | }); 43 | users.filter(u => !u.core && (u.iconCount || 0) > 0).forEach(user => { 44 | this.addUser(this.$community, user); 45 | }); 46 | this.$main.style.display = 'block'; 47 | } 48 | } 49 | 50 | addUser(parent: HTMLDivElement, user: User) { 51 | const $user = document.createElement('mdi-card-user') as MdiCardUser; 52 | $user.user = user; 53 | parent.appendChild($user); 54 | } 55 | } -------------------------------------------------------------------------------- /src/content/getting-started-ruby-on-rails.md: -------------------------------------------------------------------------------- 1 | # Ruby on Rails - Getting Started 2 | 3 | 'material_design_icons' enables you to generate both HTML tags and inline SVG of [Material Design Icons](http://www.materialdesignicons.com/) for your Ruby on Rails projects. 4 | 5 | ## Installation 6 | 7 | Add this line to your application's Gemfile: 8 | 9 | gem 'material_design_icons' 10 | 11 | And then execute: 12 | 13 | $ bundle 14 | 15 | Or install it yourself as: 16 | 17 | $ gem install material_design_icons 18 | 19 | Import the stylesheet by adding this line to your application's CSS manifest (application.css): 20 | 21 | *= require materialdesignicons 22 | 23 | ## Usage 24 | 25 | ### Webfont Tags 26 | 27 | ``` 28 | mdi_tag(names, class: 'class-name') 29 | ``` 30 | 31 | You can specify a single or multiple Material Design Icons class names: 32 | 33 | ```erb 34 | <%= mdi_tag('hexagon 48px') %> 35 | ``` 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | You can optionally specify additional class names: 42 | 43 | ```erb 44 | <%= mdi_tag('hexagon 48px', class: 'orange') %> 45 | ``` 46 | 47 | ```html 48 | 49 | ``` 50 | 51 | ### Inline SVG 52 | 53 | ``` 54 | mdi_svg(name, options={}) 55 | ``` 56 | 57 | You can specify a single icon name with options: 58 | 59 | ```erb 60 | <%= mdi_svg('hexagon') %> 61 | ``` 62 | 63 | ```xml 64 | 65 | 66 | 67 | ``` 68 | 69 | The inline SVG makes use of the [inline_svg](https://github.com/jamesmartin/inline_svg) gem, so you can use any of the [options](https://github.com/jamesmartin/inline_svg#options) it provides. 70 | -------------------------------------------------------------------------------- /src/app/admin/basePage/basePage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Package } from 'app/shared/models/package.model'; 3 | import { ActivatedRoute } from '@angular/router'; 4 | import { Icon } from 'app/shared/models/icon.model'; 5 | import { IconService } from 'app/shared/icon.service'; 6 | 7 | @Component({ 8 | selector: 'mdi-admin-base-page', 9 | templateUrl: './basePage.component.html', 10 | styleUrls: ['./basePage.component.scss'], 11 | providers: [ 12 | IconService 13 | ] 14 | }) 15 | export class AdminBasePageComponent { 16 | 17 | constructor( 18 | private iconService: IconService, 19 | private route: ActivatedRoute 20 | ) { 21 | this.packages.push(new Package("38EF63D0-4744-11E4-B3CF-842B2B6CFE1B", "Material Design Icons")); 22 | this.packages.push(new Package("531A9B44-1962-11E5-89CC-842B2B6CFE1B", "Material Design Icons Light")); 23 | const pack = this.route.snapshot.data['package']; 24 | if (pack) { 25 | this.selectedPackage = this.packages.find(p => p.id === pack.id); 26 | } else { 27 | this.selectedPackage = this.packages[0]; 28 | } 29 | } 30 | 31 | public packages: Package[] = []; 32 | public selectedPackage: Package = null; 33 | public icons: Icon[]; 34 | public baseIcons: any[] = []; 35 | 36 | async selectPackage() { 37 | this.icons = await this.iconService.getAdminIcons(this.selectedPackage.id); 38 | for (let i of this.icons) { 39 | const baseIcon = this.baseIcons.find(x => x.id === i.baseIconId); 40 | if (baseIcon) { 41 | baseIcon.icons.push(i); 42 | if (i.id === i.baseIconId) { 43 | baseIcon.icon = i; 44 | } 45 | } else { 46 | this.baseIcons.push({ 47 | id: i.baseIconId, 48 | icon: i.id == i.baseIconId ? i : null, 49 | icons: [i] 50 | }); 51 | } 52 | } 53 | console.log(this.baseIcons); 54 | } 55 | 56 | async ngOnInit() { 57 | await this.selectPackage(); 58 | } 59 | 60 | } -------------------------------------------------------------------------------- /src/app/shared/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpParams } from '@angular/common/http'; 3 | 4 | import { User } from 'app/shared/models/user.model'; 5 | import { PromiseCacheService } from 'app/shared/promiseCache.service'; 6 | import { PromiseCache, CacheParam } from 'app/shared/promiseCache.decorator'; 7 | 8 | @Injectable() 9 | export class UserService { 10 | 11 | constructor( 12 | private http: HttpClient, 13 | private promiseCacheService: PromiseCacheService 14 | ) { } 15 | 16 | @PromiseCache() 17 | async getUser( @CacheParam userId: string): Promise { 18 | let user = await this.http.get('/api/user/' + userId) 19 | .map(i => new User().from(i)) 20 | .toPromise(); 21 | return user; 22 | } 23 | 24 | @PromiseCache() 25 | async getUsers(): Promise { 26 | let res = await this.http.get('/api/user') 27 | .toPromise(); 28 | return res.map(i => new User().from(i)); 29 | } 30 | 31 | async getAdminProfile(): Promise { 32 | return await this.http.get('/api/admin/profile') 33 | .map(i => new User().from(i)) 34 | .toPromise(); 35 | } 36 | 37 | async updateAdminProfile(user: User): Promise { 38 | return await this.http.post('/api/admin/profile', user) 39 | .map(i => new User().from(i)) 40 | .toPromise(); 41 | } 42 | 43 | async updateAdminProfileAvatar(data: string): Promise { 44 | return await this.http.post('/api/admin/profile/avatar', { 45 | base64: data.replace('data:image/png;base64,', '') 46 | }) 47 | .map(i => new User().from(i)) 48 | .toPromise(); 49 | } 50 | 51 | async getAdminUsers(packageId: string): Promise { 52 | return await this.http.get('/api/admin/user', { 53 | params: { 54 | 'packageId': packageId 55 | } 56 | }) 57 | .map(users => users.map(i => new User().from(i))) 58 | .toPromise(); 59 | } 60 | 61 | } -------------------------------------------------------------------------------- /src/content/guide-webfont-alternative.md: -------------------------------------------------------------------------------- 1 | # Webfont Alternatives - Guide 2 | 3 | This guide will outline some alterntives of the Webfont and why other solutions might be more ideal. 4 | 5 | ## What is the webfont 6 | 7 | The webfont is several font files that your browser can pick from. All modern browsers will pick the `woff2` font file to download. This font as of `v5.3.45` is **291 KB** and the CSS is **49.4 KB** compressed and growing with each release. 8 | 9 | - Large Size (larger than any modern web framework) 10 | - Use only 10 Icons and it includes all. 11 | 12 |
13 | In a scenerio where the frontend does not know all required icons it may be ideal to use the webfont. 14 |
15 | 16 | ## Iconify 17 | 18 | Instead of using web font, you can use Iconify SVG framework. It is as easy to use as the web font, but it only loads icons that are used on page and renders them as pixel perfect SVG rather than text. Read [Iconify Guide](/guide/iconify) guide on how to use MDI with Iconify. 19 | 20 | ## React Developer 21 | 22 | For those using the React framework there is a first party provided component `@mdi/react`. 23 | 24 | icon:react View the React Guide 25 | 26 | ## Angular 27 | 28 | icon:angular View the Angular Guide 29 | 30 | ## VueJS 31 | 32 | icon:vuejs View the VueJS Guide 33 | 34 | ## Other 35 | 36 | The `@mdi/js` library contains all the icon path data. By using this library in your JavaScript you ensure you're only including the icons that are needed. 37 | 38 | ```javascript 39 | import { mdiAccount } from '@mdi/js'; 40 | 41 | // mdiAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z' 42 | 43 | document.querySelector('svg path').setAttribute('d', mdiAccount); 44 | ``` 45 | 46 | ```html 47 | 48 | 49 | 50 | ``` 51 | -------------------------------------------------------------------------------- /src/app/shared/markdown/markdown.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ElementRef, ViewChild, EventEmitter, Output } from "@angular/core"; 2 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 3 | 4 | import { HighlightService } from './../../shared/highlight.service' 5 | 6 | declare var Remarkable: any; 7 | 8 | export class MarkdownReplace { 9 | constructor( 10 | public find: RegExp, 11 | public replace: (substring: string, ...args: any[]) => string, 12 | public render?: () => void 13 | ) { } 14 | } 15 | 16 | @Component({ 17 | selector: 'markdown-component', 18 | template: `
`, 19 | providers: [ 20 | HighlightService 21 | ] 22 | }) 23 | export class MarkdownComponent { 24 | htmlData: SafeHtml = null; 25 | private _content = '

Loading...

'; 26 | @Input('replace') replace: MarkdownReplace[] = []; 27 | @Input('content') set content(value: string) { 28 | if (this._content != value) { 29 | this._content = value; 30 | this.render(); 31 | } 32 | } 33 | @Output('render') renderEvent = new EventEmitter(); 34 | get content(): string { 35 | return this._content; 36 | } 37 | constructor( 38 | private sanitizer: DomSanitizer, 39 | private highlightService: HighlightService 40 | ) { } 41 | 42 | remarkable = new Remarkable({ 43 | html: true 44 | }); 45 | 46 | render() { 47 | if (this.content == null) { return; } 48 | let html = this.remarkable.render(this.content); 49 | // Replace Various Items 50 | this.replace.forEach(o => { 51 | html = html.replace(o.find, o.replace); 52 | }); 53 | // Render HTML 54 | this.htmlData = this.sanitizer.bypassSecurityTrustHtml(html); 55 | // Additional Rendering 56 | this.replace.forEach(o => { 57 | if (o.render != null) { 58 | o.render(); 59 | } 60 | }); 61 | // Code blocks 62 | setTimeout(() => { 63 | this.highlightService.highlightAll(); 64 | // Render 65 | this.renderEvent.emit(); 66 | }); 67 | } 68 | } -------------------------------------------------------------------------------- /src/app/admin/renamePage/renamePage.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |

As a contributor you can rename icons. Every icon rename must have an issue recorded.

7 |
8 |
9 |
10 |
11 |
12 |
13 |

Rename Form

14 |
15 | 21 |
22 |
23 | 29 |
30 |
31 | Enter New Name 32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 |

Hmm...

44 |
45 |
-------------------------------------------------------------------------------- /src/content/api.md: -------------------------------------------------------------------------------- 1 | # API Endpoints 2 | 3 |
4 | icon:information-outline Please do not use these endpoints to scrape the site or to build third party applications. All data is provided in the meta.json on the CDN or in the GitHub repo after every release. 5 |
6 | 7 | To help others build out features for the site all the endpoints are described below. 8 | 9 | ## Public Endpoints 10 | 11 | Public endpoints are visible to everyone using the website. 12 | 13 | - No Authentication 14 | - Cached results (up to 5 minutes) 15 | - Objects may not contain all properties (ex: user objects) 16 | - Look for the lock symbol in the object definitions below. 17 | 18 | import:/content/api/get-package.md 19 | 20 | import:/content/api/get-package-by-id.md 21 | 22 | import:/content/api/get-icon-by-id.md 23 | 24 | import:/content/api/get-icon-by-name.md 25 | 26 | import:/content/api/get-tag.md 27 | 28 | import:/content/api/get-user.md 29 | 30 | import:/content/api/get-user-by-id.md 31 | 32 | import:/content/api/get-style.md 33 | 34 | import:/content/api/get-base-icons.md 35 | 36 | import:/content/api/get-icon-download.md 37 | 38 | import:/content/api/get-package-user.md 39 | 40 | ## Private Endpoints 41 | 42 | While pretty much all data is open to the public most of the management related API's are restricted to collaborator and admin accounts. 43 | 44 | import:/content/api/get-admin-package-font.md 45 | 46 | import:/content/api/get-admin-icon-modification.md 47 | 48 | import:/content/api/post-admin-icon-name.md 49 | 50 | import:/content/api/post-admin-icon-description.md 51 | 52 | import:/content/api/post-admin-icon-data.md 53 | 54 | import:/content/api/post-admin-icon-optimize.md 55 | 56 | import:/content/api/post-admin-icon-tag.md 57 | 58 | import:/content/api/post-admin-icon-alias.md 59 | 60 | import:/content/api/post-admin-icon-style.md 61 | 62 | import:/content/api/post-admin-user.md -------------------------------------------------------------------------------- /src/content/getting-started-bootstrap-modal.md: -------------------------------------------------------------------------------- 1 | ### Modal 2 | 3 | tabs 4 | tab Example 5 | 6 | 25 | 26 | /tab 27 | tab Code 28 | 29 | ```html 30 | 49 | ``` 50 | 51 | /tab 52 | tab Nodes 53 | 54 | Official Documentation for Modal 55 | 56 | /tab 57 | /tabs -------------------------------------------------------------------------------- /src/app/admin/services/login.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs/Rx'; 3 | import { Router, Route, ActivatedRoute } from '@angular/router'; 4 | import { HttpClient } from '@angular/common/http'; 5 | import { PromiseCache } from 'app/shared/promiseCache.decorator'; 6 | import { PromiseCacheService } from 'app/shared/promiseCache.service'; 7 | import { User } from 'app/shared/models/user.model'; 8 | 9 | @Injectable() 10 | export class LoginService { 11 | 12 | private url: string; 13 | 14 | constructor ( 15 | private http: HttpClient, 16 | private router: Router, 17 | private route: ActivatedRoute, 18 | private promiseCacheService: PromiseCacheService 19 | ) { 20 | this.url = route.snapshot.url.map(m => m.path).join('/'); 21 | } 22 | 23 | login (user: string, pass: string): Promise { 24 | // Remove cache. 25 | this.promiseCacheService.remove('isAuthed'); 26 | // Login details 27 | let body = { 28 | user: user, 29 | pass: pass 30 | }; 31 | return this.http.post('/api/admin', body).toPromise(); 32 | } 33 | 34 | @PromiseCache('isAuthed') 35 | isAuthed (redirect:boolean = true): Promise { 36 | return this.http.get('/api/admin') 37 | .toPromise() 38 | .then(isAuthed => { 39 | if (redirect 40 | && (this.url != 'admin' 41 | && this.url.match(/^admin/) != null) 42 | && !(isAuthed)) { 43 | this.router.navigateByUrl('/admin'); 44 | } 45 | return isAuthed; 46 | }); 47 | } 48 | 49 | async getAdmin(): Promise { 50 | let res = await this.http.get('/api/admin/current') 51 | .toPromise(); 52 | return new User().from(res); 53 | } 54 | 55 | logout (): Promise { 56 | return this.http.delete('/api/admin') 57 | .toPromise() 58 | .then(res => { 59 | // Remove cache. 60 | this.promiseCacheService.remove('isAuthed'); 61 | // Navigate 62 | this.router.navigateByUrl('/admin'); 63 | return null; 64 | }); 65 | } 66 | 67 | } -------------------------------------------------------------------------------- /src/content/getting-started-polymer.md: -------------------------------------------------------------------------------- 1 | # Polymer - Getting Started 2 | 3 | Install and import the `iron-icon` web component, as well as `mdi-svg` to get started! 4 | 5 | ```bash 6 | bower install --save mdi-svg 7 | bower install --save PolymerElements/iron-icon 8 | ``` 9 | 10 | ## Using SVGs 11 | 12 | Here's an example usage of how to use the `iron-icon` web component: 13 | 14 | ```html 15 | 16 | 17 | 23 | 24 | 25 | ``` 26 | 27 | ## Using `mdi-iconset-svg` 28 | 29 | [![View `mdi-iconset-svg` on WebComponents.org](https://img.shields.io/badge/webcomponents.org-mdi--iconset--svg-blue.svg)](https://www.webcomponents.org/element/kriss-kross-io/mdi-iconset-svg "View the web component at webcomponents.org") 30 | 31 | Use the `icon` attribute of the `iron-icon` web component and specify the namespace of the icon, as well as the icon itself: 32 | 33 | ``` 34 | bower install --save kriss-kross-io/mdi-iconset-svg 35 | bower install --save PolymerElements/iron-icon 36 | ``` 37 | 38 | ```html 39 | 40 | 41 | 42 | 43 | ``` 44 | 45 | The iconset has duplicate icons, and it's not recommended to import all the icons. 46 | Visit the [demo page](https://www.webcomponents.org/element/kriss-kross-io/mdi-iconset-svg/demo/demo/index.html) of the `mdi-iconset-svg` web component to view all the icons and namespaces. 47 | 48 | Alternatively, you can create your own iconset with only the required icons. [MDI Polymer Iconset Generator](https://mdi-poly-icon.appspot.com/) includes all icons from `mdi-iconset-svg`. 49 | 50 | 1. Visit in your browser. 51 | 2. Select the icons you want to use in your app. 52 | 3. Download the optimized `` markup and create an HTML import for it. 53 | 4. Load the import in your app and start using the icons! 54 | --------------------------------------------------------------------------------