Skip to content

Commit 1e2101e

Browse files
renemadsenrenemadsen
authored
Merge pull request #7187 from microting/copilot/update-code-for-material-design-support
Add Material Symbols support alongside Material Icons
2 parents 5cabebb + fecbdab commit 1e2101e

File tree

4 files changed

+230
-3
lines changed

4 files changed

+230
-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: 69 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,72 @@ i {
1818
color: $eform-green-dark
1919
}
2020
}
21+
22+
&.material-symbols-outlined,
23+
&.material-symbols-rounded,
24+
&.material-symbols-sharp {
25+
// Default font variation settings (for 24px which is most common)
26+
font-variation-settings:
27+
'FILL' 0,
28+
'wght' 400,
29+
'GRAD' 0,
30+
'opsz' 24;
31+
32+
// Size-specific variations with appropriate optical sizing
33+
&.md-18 {
34+
font-size: 18px;
35+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
36+
37+
&.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
38+
&.light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
39+
&.bold { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
40+
}
41+
&.md-24 {
42+
font-size: 24px;
43+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
44+
45+
&.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
46+
&.light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
47+
&.bold { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24; }
48+
}
49+
&.md-36 {
50+
font-size: 36px;
51+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
52+
53+
&.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
54+
&.light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; }
55+
&.bold { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 40; }
56+
}
57+
&.md-48 {
58+
font-size: 48px;
59+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
60+
61+
&.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
62+
&.light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }
63+
&.bold { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48; }
64+
}
65+
66+
&.material-icon-pointer {
67+
cursor: pointer;
68+
}
69+
70+
&.material-icon-danger {
71+
color: $eform-red-dark
72+
}
73+
&.material-icon-success {
74+
color: $eform-green-dark
75+
}
76+
77+
// Style variations for default size (when no size class is specified)
78+
// These work when no md-* class is present
79+
&.filled:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
80+
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
81+
}
82+
&.light:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
83+
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
84+
}
85+
&.bold:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
86+
font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
87+
}
88+
}
2189
}

0 commit comments

Comments
 (0)