Skip to content

Commit 9a31fde

Browse files
Copilotrenemadsen
Copilot
and
renemadsen
committed
Add support for Material Design Symbols alongside Material Icons
Co-authored-by: renemadsen <[email protected]>
1 parent 9a783db commit 9a31fde

File tree

4 files changed

+199
-3
lines changed

4 files changed

+199
-3
lines changed

‎eform-client/MATERIAL_ICONS_USAGE.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# Material Icons and Symbols Usage Guide
2+
3+
This application now supports both **Material Design Icons** and **Material Design Symbols**.
4+
5+
## Overview
6+
7+
- **Material Icons**: The original icon font from Google (ligature-based)
8+
- **Material Symbols**: The newer variable font system with customizable styles
9+
10+
## Using Material Icons (Default)
11+
12+
Material Icons is the default font set. Simply use `<mat-icon>` without any special attributes:
13+
14+
```html
15+
<!-- Default Material Icons -->
16+
<mat-icon>home</mat-icon>
17+
<mat-icon>settings</mat-icon>
18+
<mat-icon>menu</mat-icon>
19+
```
20+
21+
## Using Material Symbols
22+
23+
To use Material Symbols, specify the `fontSet` attribute:
24+
25+
### Outlined Style (Default for Symbols)
26+
```html
27+
<mat-icon fontSet="material-symbols-outlined">home</mat-icon>
28+
<mat-icon fontSet="material-symbols-outlined">settings</mat-icon>
29+
```
30+
31+
### Rounded Style
32+
```html
33+
<mat-icon fontSet="material-symbols-rounded">home</mat-icon>
34+
<mat-icon fontSet="material-symbols-rounded">favorite</mat-icon>
35+
```
36+
37+
### Sharp Style
38+
```html
39+
<mat-icon fontSet="material-symbols-sharp">home</mat-icon>
40+
<mat-icon fontSet="material-symbols-sharp">star</mat-icon>
41+
```
42+
43+
## Additional Styling Options
44+
45+
### Material Symbols with Custom Variations
46+
47+
Material Symbols support variable font features:
48+
49+
```html
50+
<!-- Filled icon -->
51+
<mat-icon fontSet="material-symbols-outlined" class="filled">favorite</mat-icon>
52+
53+
<!-- Light weight -->
54+
<mat-icon fontSet="material-symbols-outlined" class="light">home</mat-icon>
55+
56+
<!-- Bold weight -->
57+
<mat-icon fontSet="material-symbols-outlined" class="bold">settings</mat-icon>
58+
```
59+
60+
### Size Classes (Works for both Icons and Symbols)
61+
62+
```html
63+
<!-- 18px -->
64+
<mat-icon class="md-18">home</mat-icon>
65+
66+
<!-- 24px (default) -->
67+
<mat-icon class="md-24">home</mat-icon>
68+
69+
<!-- 36px -->
70+
<mat-icon class="md-36">home</mat-icon>
71+
72+
<!-- 48px -->
73+
<mat-icon class="md-48">home</mat-icon>
74+
```
75+
76+
### Color Classes
77+
78+
```html
79+
<!-- Danger/Error color -->
80+
<mat-icon class="material-icon-danger">error</mat-icon>
81+
82+
<!-- Success color -->
83+
<mat-icon class="material-icon-success">check_circle</mat-icon>
84+
```
85+
86+
### Pointer Cursor
87+
88+
```html
89+
<!-- Add pointer cursor for clickable icons -->
90+
<mat-icon class="material-icon-pointer" (click)="handleClick()">info</mat-icon>
91+
```
92+
93+
## Examples
94+
95+
### Combining Multiple Classes
96+
97+
```html
98+
<!-- Large, filled symbol with pointer cursor -->
99+
<mat-icon fontSet="material-symbols-rounded"
100+
class="md-48 filled material-icon-pointer"
101+
(click)="toggleFavorite()">
102+
favorite
103+
</mat-icon>
104+
105+
<!-- Small danger icon -->
106+
<mat-icon class="md-18 material-icon-danger">warning</mat-icon>
107+
```
108+
109+
### Using with Buttons
110+
111+
```html
112+
<!-- Material Icons (default) -->
113+
<button mat-icon-button>
114+
<mat-icon>more_vert</mat-icon>
115+
</button>
116+
117+
<!-- Material Symbols -->
118+
<button mat-icon-button>
119+
<mat-icon fontSet="material-symbols-rounded">more_vert</mat-icon>
120+
</button>
121+
```
122+
123+
## Icon Availability
124+
125+
- Material Icons: https://fonts.google.com/icons?icon.set=Material+Icons
126+
- Material Symbols: https://fonts.google.com/icons?icon.set=Material+Symbols
127+
128+
Note: Most icon names are the same between both sets, but always verify on the Google Fonts website.
129+
130+
## Technical Details
131+
132+
### Loaded Font Families
133+
- `Material Icons` (default)
134+
- `Material Symbols Outlined`
135+
- `Material Symbols Rounded`
136+
- `Material Symbols Sharp`
137+
138+
### Font Variation Settings for Symbols
139+
140+
Material Symbols use OpenType variable font features:
141+
- `FILL`: 0 (outlined) to 1 (filled)
142+
- `wght`: 100 to 700 (weight)
143+
- `GRAD`: -50 to 200 (grade)
144+
- `opsz`: 20 to 48 (optical size)
145+
146+
These are automatically set based on size and style classes in `_icon.scss`.

‎eform-client/src/app/app.module.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,11 @@ import {SharedPnModule} from './plugins/modules/shared/shared-pn.module';
3131
import {MatSidenavModule} from '@angular/material/sidenav';
3232
import {MatButtonModule} from '@angular/material/button';
3333
import {MatTreeModule} from '@angular/material/tree';
34-
import {MatIconModule} from '@angular/material/icon';
34+
import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
3535
import {MatToolbarModule} from '@angular/material/toolbar';
3636
import {MatMenuModule} from '@angular/material/menu';
3737
import {MatExpansionModule} from '@angular/material/expansion';
38+
import {DomSanitizer} from '@angular/platform-browser';
3839
import {MtxSelectModule} from '@ng-matero/extensions/select';
3940
import {FormsModule} from '@angular/forms';
4041
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -143,7 +144,16 @@ import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
143144
bootstrap: [AppComponent],
144145
})
145146
export class AppModule {
146-
constructor() {
147+
constructor(
148+
private matIconRegistry: MatIconRegistry,
149+
private domSanitizer: DomSanitizer
150+
) {
147151
console.debug('AppModule - constructor');
152+
// Register Material Symbols font sets
153+
this.matIconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
154+
this.matIconRegistry.registerFontClassAlias('material-symbols-rounded', 'material-symbols-rounded');
155+
this.matIconRegistry.registerFontClassAlias('material-symbols-sharp', 'material-symbols-sharp');
156+
// Default font set remains Material Icons
157+
this.matIconRegistry.setDefaultFontSetClass('material-icons');
148158
}
149159
}

‎eform-client/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
<link rel="apple-touch-icon" sizes="152x152" href="/assets/158.png"/>
1212
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
1313
rel="stylesheet">
14+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
15+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
16+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
1417
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" rel="stylesheet">
1518
<link rel="preconnect" href="https://fonts.gstatic.com">
1619
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

‎eform-client/src/scss/components/_icon.scss‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "../utilities/colors" as *;
22

3-
i {
3+
i, .mat-icon {
44
&.material-icons {
55
&.md-18 { font-size: 18px; }
66
&.md-24 { font-size: 24px; }
@@ -18,4 +18,41 @@ i {
1818
color: $eform-green-dark
1919
}
2020
}
21+
22+
&.material-symbols-outlined,
23+
&.material-symbols-rounded,
24+
&.material-symbols-sharp {
25+
font-variation-settings:
26+
'FILL' 0,
27+
'wght' 400,
28+
'GRAD' 0,
29+
'opsz' 24;
30+
31+
&.md-18 { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
32+
&.md-24 { font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
33+
&.md-36 { font-size: 36px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
34+
&.md-48 { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
35+
36+
&.material-icon-pointer {
37+
cursor: pointer;
38+
}
39+
40+
&.material-icon-danger {
41+
color: $eform-red-dark
42+
}
43+
&.material-icon-success {
44+
color: $eform-green-dark
45+
}
46+
47+
// Additional Material Symbols variations
48+
&.filled {
49+
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
50+
}
51+
&.light {
52+
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
53+
}
54+
&.bold {
55+
font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
56+
}
57+
}
2158
}

0 commit comments

Comments
 (0)