Get material symbols working
This commit is contained in:
david committed
1 parent
22f1b8aaf7
commit
889acf57d9
3 files changed
+83
-74
No files matched your search
@@ -1,92 +1,47 @@
|
||||
<link
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
style="position: absolute; width: 0; height: 0; overflow: hidden"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="google" viewBox="0 0 46 46">
|
||||
<path
|
||||
id="Shape"
|
||||
style="fill: #4285f4"
|
||||
d="M45,23.5 c0-1.6-0.1-3.2-0.4-4.7H23.1v8.8h12.3c-0.5,2.9-2.1,5.3-4.6,6.9v5.7h7.4C42.5,36.3,45,30.5,45,23.5L45,23.5z"
|
||||
></path>
|
||||
<path
|
||||
id="Shape_1_"
|
||||
style="fill: #34a853"
|
||||
d="M23.1,45.8 c6.2,0,11.3-2,15.1-5.5l-7.4-5.7c-2,1.4-4.7,2.2-7.7,2.2c-5.9,0-11-4-12.8-9.4H2.7v5.9C6.4,40.7,14.1,45.8,23.1,45.8L23.1,45.8z"
|
||||
></path>
|
||||
<path
|
||||
id="Shape_2_"
|
||||
style="fill: #fbbc05"
|
||||
d="M10.3,27.3 C9.8,26,9.6,24.5,9.6,23s0.3-3,0.7-4.3v-5.9H2.7C1.1,15.8,0.3,19.3,0.3,23s0.9,7.2,2.4,10.2L10.3,27.3L10.3,27.3z"
|
||||
></path>
|
||||
<path
|
||||
id="Shape_3_"
|
||||
style="fill: #ea4335"
|
||||
d="M23.1,9.3 c3.4,0,6.4,1.2,8.7,3.4l6.5-6.5c-4-3.7-9.1-5.9-15.3-5.9c-8.9,0-16.6,5.1-20.4,12.6l7.6,5.9C12.1,13.3,17.1,9.3,23.1,9.3L23.1,9.3z"
|
||||
></path>
|
||||
<path id="Shape" style="fill: #4285f4"
|
||||
d="M45,23.5 c0-1.6-0.1-3.2-0.4-4.7H23.1v8.8h12.3c-0.5,2.9-2.1,5.3-4.6,6.9v5.7h7.4C42.5,36.3,45,30.5,45,23.5L45,23.5z">
|
||||
</path>
|
||||
<path id="Shape_1_" style="fill: #34a853"
|
||||
d="M23.1,45.8 c6.2,0,11.3-2,15.1-5.5l-7.4-5.7c-2,1.4-4.7,2.2-7.7,2.2c-5.9,0-11-4-12.8-9.4H2.7v5.9C6.4,40.7,14.1,45.8,23.1,45.8L23.1,45.8z">
|
||||
</path>
|
||||
<path id="Shape_2_" style="fill: #fbbc05"
|
||||
d="M10.3,27.3 C9.8,26,9.6,24.5,9.6,23s0.3-3,0.7-4.3v-5.9H2.7C1.1,15.8,0.3,19.3,0.3,23s0.9,7.2,2.4,10.2L10.3,27.3L10.3,27.3z">
|
||||
</path>
|
||||
<path id="Shape_3_" style="fill: #ea4335"
|
||||
d="M23.1,9.3 c3.4,0,6.4,1.2,8.7,3.4l6.5-6.5c-4-3.7-9.1-5.9-15.3-5.9c-8.9,0-16.6,5.1-20.4,12.6l7.6,5.9C12.1,13.3,17.1,9.3,23.1,9.3L23.1,9.3z">
|
||||
</path>
|
||||
</symbol>
|
||||
<symbol id="gitlab" viewBox="0 0 40 36">
|
||||
<path style="fill: #e24329" d="M20,35.9l7.2-22H12.8L20,35.9L20,35.9z" />
|
||||
<path style="fill: #fc6d26" d="M20,35.9l-7.2-22h-10L20,35.9L20,35.9z" />
|
||||
<path
|
||||
style="fill: #fca326"
|
||||
d="M2.8,13.9l-2.2,6.7c-0.2,0.6,0,1.3,0.5,1.7L20,35.9L2.8,13.9L2.8,13.9z"
|
||||
/>
|
||||
<path
|
||||
style="fill: #e24329"
|
||||
d="M2.8,13.9h10L8.5,0.6c-0.2-0.7-1.2-0.7-1.4,0L2.8,13.9L2.8,13.9z"
|
||||
/>
|
||||
<path style="fill: #fca326" d="M2.8,13.9l-2.2,6.7c-0.2,0.6,0,1.3,0.5,1.7L20,35.9L2.8,13.9L2.8,13.9z" />
|
||||
<path style="fill: #e24329" d="M2.8,13.9h10L8.5,0.6c-0.2-0.7-1.2-0.7-1.4,0L2.8,13.9L2.8,13.9z" />
|
||||
<path style="fill: #fc6d26" d="M20,35.9l7.2-22h10L20,35.9L20,35.9z" />
|
||||
<path
|
||||
style="fill: #fca326"
|
||||
d="M37.2,13.9l2.2,6.7c0.2,0.6,0,1.3-0.5,1.7L20,35.9L37.2,13.9L37.2,13.9z"
|
||||
/>
|
||||
<path
|
||||
style="fill: #e24329"
|
||||
d="M37.2,13.9h-10l4.3-13.3c0.2-0.7,1.2-0.7,1.4,0L37.2,13.9L37.2,13.9z"
|
||||
/>
|
||||
<path style="fill: #fca326" d="M37.2,13.9l2.2,6.7c0.2,0.6,0,1.3-0.5,1.7L20,35.9L37.2,13.9L37.2,13.9z" />
|
||||
<path style="fill: #e24329" d="M37.2,13.9h-10l4.3-13.3c0.2-0.7,1.2-0.7,1.4,0L37.2,13.9L37.2,13.9z" />
|
||||
</symbol>
|
||||
<symbol id="microsoft" viewBox="0 0 220 220">
|
||||
<path
|
||||
style="fill: #f45326"
|
||||
d="M 104.8675,104.8675 0,104.8675 0,0 l 104.8675,0 0,104.8675 z"
|
||||
/>
|
||||
<path
|
||||
style="fill: #82bc06"
|
||||
d="m 220.65375,104.8675 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z"
|
||||
/>
|
||||
<path
|
||||
style="fill: #05a6f1"
|
||||
d="m 104.865,220.695 -104.865,0 0,-104.8675 104.865,0 0,104.8675 z"
|
||||
/>
|
||||
<path
|
||||
style="fill: #ffbb08"
|
||||
d="m 220.65375,220.695 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z"
|
||||
/>
|
||||
<path style="fill: #f45326" d="M 104.8675,104.8675 0,104.8675 0,0 l 104.8675,0 0,104.8675 z" />
|
||||
<path style="fill: #82bc06" d="m 220.65375,104.8675 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z" />
|
||||
<path style="fill: #05a6f1" d="m 104.865,220.695 -104.865,0 0,-104.8675 104.865,0 0,104.8675 z" />
|
||||
<path style="fill: #ffbb08" d="m 220.65375,220.695 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z" />
|
||||
</symbol>
|
||||
<symbol id="github" viewBox="0 0 1792 1792">
|
||||
<path
|
||||
d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
|
||||
/>
|
||||
d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z" />
|
||||
</symbol>
|
||||
<symbol id="slack" viewBox="0 0 32 32">
|
||||
<path
|
||||
fill="#000000"
|
||||
d="M6.723 20.22c-0.004 1.855-1.505 3.358-3.359 3.364h-0.001c-1.856-0.005-3.359-1.508-3.363-3.364v-0c0.005-1.854 1.508-3.356 3.362-3.36h3.36zM8.417 20.22c0.005-1.854 1.507-3.355 3.361-3.36h0c1.854 0.005 3.356 1.506 3.361 3.36v8.418c-0.005 1.855-1.507 3.357-3.361 3.363h-0.001c-1.855-0.005-3.357-1.508-3.361-3.362v-0zM11.779 6.723c-1.854-0.005-3.355-1.506-3.361-3.359v-0.001c0.005-1.855 1.507-3.357 3.361-3.363h0.001c1.855 0.005 3.357 1.508 3.361 3.362v3.36zM11.779 8.417c1.854 0.005 3.356 1.507 3.361 3.361v0.001c-0.005 1.854-1.507 3.356-3.361 3.361h-8.416c-1.855-0.005-3.357-1.507-3.363-3.361v-0.001c0.005-1.855 1.508-3.357 3.362-3.361h0zM25.275 11.779c0.005-1.855 1.508-3.357 3.362-3.361h0c1.855 0.005 3.357 1.507 3.363 3.361v0.001c-0.005 1.855-1.508 3.357-3.362 3.361h-3.363zM23.584 11.779c-0.005 1.855-1.509 3.358-3.364 3.361h-0c-1.854-0.005-3.355-1.507-3.36-3.361v-8.416c0.004-1.855 1.506-3.357 3.36-3.363h0c1.856 0.004 3.359 1.507 3.364 3.362v0zM20.22 25.275c1.856 0.004 3.359 1.507 3.364 3.362v0c-0.005 1.856-1.508 3.359-3.364 3.363h-0c-1.854-0.005-3.356-1.508-3.36-3.362v-3.363zM20.22 23.584c-1.855-0.005-3.357-1.509-3.36-3.364v-0c0.005-1.854 1.506-3.355 3.36-3.36h8.418c1.855 0.004 3.357 1.506 3.363 3.36v0c-0.004 1.856-1.507 3.359-3.362 3.364h-0z"
|
||||
></path>
|
||||
<path fill="#000000"
|
||||
d="M6.723 20.22c-0.004 1.855-1.505 3.358-3.359 3.364h-0.001c-1.856-0.005-3.359-1.508-3.363-3.364v-0c0.005-1.854 1.508-3.356 3.362-3.36h3.36zM8.417 20.22c0.005-1.854 1.507-3.355 3.361-3.36h0c1.854 0.005 3.356 1.506 3.361 3.36v8.418c-0.005 1.855-1.507 3.357-3.361 3.363h-0.001c-1.855-0.005-3.357-1.508-3.361-3.362v-0zM11.779 6.723c-1.854-0.005-3.355-1.506-3.361-3.359v-0.001c0.005-1.855 1.507-3.357 3.361-3.363h0.001c1.855 0.005 3.357 1.508 3.361 3.362v3.36zM11.779 8.417c1.854 0.005 3.356 1.507 3.361 3.361v0.001c-0.005 1.854-1.507 3.356-3.361 3.361h-8.416c-1.855-0.005-3.357-1.507-3.363-3.361v-0.001c0.005-1.855 1.508-3.357 3.362-3.361h0zM25.275 11.779c0.005-1.855 1.508-3.357 3.362-3.361h0c1.855 0.005 3.357 1.507 3.363 3.361v0.001c-0.005 1.855-1.508 3.357-3.362 3.361h-3.363zM23.584 11.779c-0.005 1.855-1.509 3.358-3.364 3.361h-0c-1.854-0.005-3.355-1.507-3.36-3.361v-8.416c0.004-1.855 1.506-3.357 3.36-3.363h0c1.856 0.004 3.359 1.507 3.364 3.362v0zM20.22 25.275c1.856 0.004 3.359 1.507 3.364 3.362v0c-0.005 1.856-1.508 3.359-3.364 3.363h-0c-1.854-0.005-3.356-1.508-3.36-3.362v-3.363zM20.22 23.584c-1.855-0.005-3.357-1.509-3.36-3.364v-0c0.005-1.854 1.506-3.355 3.36-3.36h8.418c1.855 0.004 3.357 1.506 3.363 3.36v0c-0.004 1.856-1.507 3.359-3.362 3.364h-0z">
|
||||
</path>
|
||||
</symbol>
|
||||
<symbol id="webhook" viewBox="0 0 50 50">
|
||||
<path
|
||||
d="M25 4c-5.512 0-10 4.488-10 10 0 3.29 1.633 6.176 4.094 8l-4.938 8.156c-.039-.011-.082-.02-.125-.031a3.976 3.976 0 0 0-3.031.406A4.013 4.013 0 0 0 9.531 36 4 4 0 0 0 13 38c.68 0 1.371-.168 2-.531a4.014 4.014 0 0 0 1.875-2.438A3.96 3.96 0 0 0 16.469 32c-.168-.29-.399-.547-.625-.781l5.437-8.938.532-.875-.875-.5A8.011 8.011 0 0 1 17 14c0-4.43 3.57-8 8-8s8 3.57 8 8c0 .824-.113 1.598-.344 2.344l1.907.593c.289-.933.437-1.914.437-2.937 0-5.512-4.488-10-10-10zm0 6c-2.207 0-4 1.793-4 4s1.793 4 4 4c.332 0 .66-.047.969-.125l4.812 8.719.469.875.906-.469A7.888 7.888 0 0 1 36 26c4.43 0 8 3.57 8 8s-3.57 8-8 8a8.007 8.007 0 0 1-5.563-2.25l-1.375 1.438A9.998 9.998 0 0 0 36 44c5.512 0 10-4.488 10-10s-4.488-10-10-10c-1.387 0-2.672.363-3.875.875l-4.406-7.969A3.964 3.964 0 0 0 29 14c0-2.207-1.793-4-4-4zM10.562 24.281C6.207 25.367 3 29.324 3 34c0 5.512 4.488 10 10 10 5.156 0 9.285-3.98 9.813-9h9.343c.446 1.723 1.985 3 3.844 3 2.207 0 4-1.793 4-4s-1.793-4-4-4c-1.86 0-3.398 1.277-3.844 3H21v1c0 4.43-3.57 8-8 8s-8-3.57-8-8c0-3.758 2.586-6.883 6.063-7.75z"
|
||||
/>
|
||||
d="M25 4c-5.512 0-10 4.488-10 10 0 3.29 1.633 6.176 4.094 8l-4.938 8.156c-.039-.011-.082-.02-.125-.031a3.976 3.976 0 0 0-3.031.406A4.013 4.013 0 0 0 9.531 36 4 4 0 0 0 13 38c.68 0 1.371-.168 2-.531a4.014 4.014 0 0 0 1.875-2.438A3.96 3.96 0 0 0 16.469 32c-.168-.29-.399-.547-.625-.781l5.437-8.938.532-.875-.875-.5A8.011 8.011 0 0 1 17 14c0-4.43 3.57-8 8-8s8 3.57 8 8c0 .824-.113 1.598-.344 2.344l1.907.593c.289-.933.437-1.914.437-2.937 0-5.512-4.488-10-10-10zm0 6c-2.207 0-4 1.793-4 4s1.793 4 4 4c.332 0 .66-.047.969-.125l4.812 8.719.469.875.906-.469A7.888 7.888 0 0 1 36 26c4.43 0 8 3.57 8 8s-3.57 8-8 8a8.007 8.007 0 0 1-5.563-2.25l-1.375 1.438A9.998 9.998 0 0 0 36 44c5.512 0 10-4.488 10-10s-4.488-10-10-10c-1.387 0-2.672.363-3.875.875l-4.406-7.969A3.964 3.964 0 0 0 29 14c0-2.207-1.793-4-4-4zM10.562 24.281C6.207 25.367 3 29.324 3 34c0 5.512 4.488 10 10 10 5.156 0 9.285-3.98 9.813-9h9.343c.446 1.723 1.985 3 3.844 3 2.207 0 4-1.793 4-4s-1.793-4-4-4c-1.86 0-3.398 1.277-3.844 3H21v1c0 4.43-3.57 8-8 8s-8-3.57-8-8c0-3.758 2.586-6.883 6.063-7.75z" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 5.7 KiB |
+18
-1
@@ -1,5 +1,18 @@
|
||||
import { applicationConfig, type Preview } from "@storybook/angular";
|
||||
import { applicationConfig, componentWrapperDecorator, moduleMetadata, type Preview } from "@storybook/angular";
|
||||
import "@angular/localize/init";
|
||||
import { MatIconRegistry } from "@angular/material/icon";
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: "parent",
|
||||
template: `<ng-content></ng-content>`,
|
||||
})
|
||||
class ParentComponent {
|
||||
constructor(private matIconRegistry: MatIconRegistry) {
|
||||
this.matIconRegistry.setDefaultFontSetClass("material-symbols-outlined");
|
||||
}
|
||||
}
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
@@ -14,6 +27,10 @@ const preview: Preview = {
|
||||
applicationConfig({
|
||||
providers: [],
|
||||
}),
|
||||
moduleMetadata({
|
||||
imports: [ParentComponent]
|
||||
}),
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -106,10 +106,40 @@ export const Typography = () => ({
|
||||
`,
|
||||
});
|
||||
|
||||
const iconNames = [
|
||||
"account_circle",
|
||||
"add",
|
||||
"brightness_medium",
|
||||
"check_circle",
|
||||
"close",
|
||||
"code",
|
||||
"computer",
|
||||
"dark_mode",
|
||||
"delete",
|
||||
"delete_outline",
|
||||
"devices_other",
|
||||
"done",
|
||||
"edit",
|
||||
"favorite",
|
||||
"file_copy",
|
||||
"keyboard_arrow_down",
|
||||
"keyboard_arrow_left",
|
||||
"keyboard_arrow_right",
|
||||
"light_mode",
|
||||
"menu",
|
||||
"settings",
|
||||
"tab",
|
||||
"warning"
|
||||
];
|
||||
export const Icons = () => ({
|
||||
template: `
|
||||
<section class="mat-typography">
|
||||
<h1>Icons</h1>
|
||||
|
||||
<div class="icon-grid">
|
||||
${iconNames.map(icon => `<mat-icon>${icon}</mat-icon>`).join('')}
|
||||
</div>
|
||||
|
||||
<p>Angular material has a bunch of icons. You can find a pretty exhaustive list of them <a href="https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/" target="_blank">here</a>
|
||||
<p>Also, <a href="https://material.angular.io/components/icon/overview" target="_blank">here's</a> Angular's documentation on icons</p>
|
||||
<p>Make sure to add the appropriate aria classes for accessibility!</p>
|
||||
@@ -139,6 +169,13 @@ export const Icons = () => ({
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
`]
|
||||
});
|
||||
|
||||
export const Colors = () => ({
|
||||
|
||||
Reference in new issue
Block a user