@allsorter/ui-components 0.0.408 → 0.0.412

package/src/lib/loader/loader.component.html

@@ -1,15 +1,15 @@
 <div class="loader-container" [attr.data-testid]="effectiveDataTestId">
   <!-- Brain Icon -->
-  <mat-icon class="loader-icon font-icon icon-brain" fontSet="material-icons">psychology</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-brain" fontSet="material-symbols-outlined">network_intelligence</mat-icon>
   <!-- Settings/Gear Icon -->
   <mat-icon class="loader-icon font-icon icon-cog" fontSet="material-icons-outlined">settings</mat-icon>
   <!-- Document Icon -->
-  <mat-icon class="loader-icon font-icon icon-document" fontSet="material-icons">article</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-document" fontSet="material-icons-outlined">article</mat-icon>
   <!-- Wand Icon -->
-  <mat-icon class="loader-icon font-icon icon-wand" fontSet="material-icons">auto_awesome</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-wand" fontSet="material-icons-outlined">auto_awesome</mat-icon>
   <!-- Settings Icon -->
-  <mat-icon class="loader-icon font-icon icon-tick" fontSet="material-icons">build</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-tick" fontSet="material-icons-outlined">done</mat-icon>
 </div>
 <div class="text-container" *ngIf="showText">
   <span class="loader-text">{{ displayText }}</span>
-</div>
+</div>

package/src/lib/loader/loader.component.scss

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_intelligence");
 
 :host {
   display: flex;
@@ -28,7 +29,7 @@
 
 .text-container {
   position: relative;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 
 .loader-text {
@@ -56,6 +57,28 @@ mat-icon.loader-icon {
   justify-content: center;
 }
 
+/* Ensure icon-tick renders at correct size when using material-icons fontSet */
+:host(.size-medium) .icon-tick[fontSet="material-icons"] {
+  font-size: 72px !important;
+  width: 72px !important;
+  height: 72px !important;
+  line-height: 72px !important;
+}
+
+:host(.size-small) .icon-tick[fontSet="material-icons"] {
+  font-size: 48px !important;
+  width: 48px !important;
+  height: 48px !important;
+  line-height: 48px !important;
+}
+
+:host(.size-large) .icon-tick[fontSet="material-icons"] {
+  font-size: 108px !important;
+  width: 108px !important;
+  height: 108px !important;
+  line-height: 108px !important;
+}
+
 /* Size variations */
 :host(.size-small) {
   .loader-container {
@@ -86,11 +109,11 @@ mat-icon.loader-icon {
   }
 
   .font-icon {
-    font-size: 72px;
+    font-size: 72px !important;
   }
 
   mat-icon.loader-icon {
-    font-size: 72px;
+    font-size: 72px !important;
     width: 72px;
     height: 72px;
   }
@@ -453,41 +476,41 @@ mat-icon.loader-icon {
 /* --- Looping Mode: Enhanced animations with enter/exit transitions --- */
 /* These are triggered when autoLoop is enabled */
 :host(.auto-loop.status-analyzing) .icon-brain {
-  animation: animate-brain 3s ease-in-out;
+  animation: animate-brain 2s ease-in-out;
 }
 
 :host(.auto-loop.status-analyzing) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-gathering) .icon-cog {
-  animation: animate-cog 3s ease-in-out;
+  animation: animate-cog 2s ease-in-out;
 }
 
 :host(.auto-loop.status-gathering) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-processing) .icon-document {
-  animation: animate-document 3s ease-in-out;
+  animation: animate-document 2s ease-in-out;
 }
 
 :host(.auto-loop.status-processing) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-applying) .icon-wand {
-  animation: animate-wand 3s ease-in-out;
+  animation: animate-wand 2s ease-in-out;
 }
 
 :host(.auto-loop.status-applying) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-done) .icon-tick {
-  animation: animate-tick 3s ease-in-out;
+  animation: animate-tick 2s ease-in-out;
 }
 
 :host(.auto-loop.status-done) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }

package/src/lib/newresumeheader/newresumeheader.component.html

@@ -46,10 +46,10 @@
                 </div>
                 <div center><ng-content select="[header-center-center]"></ng-content>
                   <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container
-                    *ngIf="isLargeScreen"><ng-container
+                    *ngIf="isLargeScreen && showHeaderButtons"><ng-container
                       *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }"></ng-container></ng-container>
                   <!-- Menu trigger and slide-out panel for small screens only -->
-                  <div class="hover-menu-container" *ngIf="!isLargeScreen">
+                  <div class="hover-menu-container" *ngIf="!isLargeScreen && showMenuTrigger && showHeaderButtons">
                     <div class="menu-trigger" (click)="toggleMenu()"><al-button buttonType="icon-label" iconOnly
                         size="header" category="grey" leftIcon="more_vert" aria-label="More options"
                         [dataTestId]="'resume-header-more-menu'"></al-button></div>

package/src/lib/newresumeheader/newresumeheader.component.scss

@@ -162,6 +162,7 @@
   border-bottom: 2px solid #37c1ce;
   border-radius: 8px;
   box-sizing: border-box;
+  margin-top: 16px !important;
 
   /**
    * When the Deep Extraction pop-out panel is NOT shown (showPopOutPanel === false),
@@ -171,7 +172,11 @@
    */
   &.header-with-bottom-margin {
     margin-bottom: 16px;
+
+
   }
+
+
 }
 
 
@@ -666,4 +671,4 @@
 //     position: relative;
 //     z-index: 1;
 //   }
-// }
+// }

package/src/lib/resume-entries/resume-entries.component.html

@@ -52,10 +52,13 @@
               <lib-field-placeholder [value]="entry.city" [placeholder]="'City'" valueClass="font-location-text"
                 [testId]="'entry-' + i + '-city'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
+              <span class="location-comma">,</span>
               <lib-field-placeholder [value]="entry.region" [placeholder]="'Region'" valueClass="font-location-text"
                 [testId]="'entry-' + i + '-region'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
-              <lib-field-placeholder [value]="entry.country" [placeholder]="'Country'" valueClass="font-location-text"
+              <span class="location-comma">,</span>
+              <lib-field-placeholder [value]="entry.country" [placeholder]="'Country'"
+                valueClass="font-location-text"
                 [testId]="'entry-' + i + '-country'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
             </div>

package/src/lib/resume-entries/resume-entries.component.scss

@@ -350,15 +350,23 @@
   flex-direction: column;
   gap: 4px;
 
+  ::ng-deep .value-text {
+    color: #717793;
+  }
+
+  // ::ng-deep .placeholder-text {
+  //   color: #717793;
+  // }
+
   &.collapsed .value-text {
-      display: -webkit-box !important;
-      -webkit-line-clamp: 1 !important;
-      line-clamp: 1 !important;
-      -webkit-box-orient: vertical !important;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: normal !important;
-    }
+    display: -webkit-box !important;
+    -webkit-line-clamp: 1 !important;
+    line-clamp: 1 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: normal !important;
+  }
 
 }
 
@@ -397,8 +405,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 24px 0;
-  min-height: 80px;
+  // padding: 24px 0;
+  // min-height: 80px;
 }
 
 .entry-loader-container {
@@ -435,7 +443,7 @@
     font-style: normal;
     letter-spacing: 0.15px;
     font-family: Roboto, sans-serif;
-    color: #717793;
+    color: #717793 !important;
   }
 
   p,

package/src/lib/tabs/tabs.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above">
+<mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above" animationDuration="0ms">
   <mat-tab *ngFor="let tab of tabComponents; let i = index">
     <ng-template mat-tab-label>
       <span [ngClass]="{ 'tab-label-content': true, 'icon-only-tab': tab.icon && tab.showIcon && !tab.labelText }"

package/src/lib/tabs/tabs.component.scss

@@ -68,6 +68,13 @@
       }
     }
 
+    // Icon size - 20x20px for all icons
+    .mat-mdc-tab .mat-icon {
+      width: 20px !important;
+      height: 20px !important;
+      font-size: 20px !important;
+    }
+
     // Medium size (36px height) - default
     &.tabs-medium .mat-mdc-tab-header {
       height: 36px;

package/src/lib/test-styling/test-styling.component.html

@@ -149,6 +149,164 @@
       <!-- candidate-section-form -->
 
     </al-tab>
+    <al-tab labelText="Education">
+      <h2>Education Section - Responsive Form Layout</h2>
+      <p>Testing field order and responsive behavior</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'education-section'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- Row: Date Type, Current Study (checkbox), Start Date, End Date -->
+        <!-- Mobile: 2 rows (Date Type|Checkbox, Start|End) - Desktop: reordered -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="2" [desktop]="4" [gap]="'16px'" [minColumns]="2">
+          <al-input [label]="'Date Type'" [placeholder]="'Select Date Type'" [value]="'Month/Year'" [type]="'text'"
+            [disabled]="false" [helperText]="false" [hasDropDown]="true" [options]="['Month/Year','Year']"
+            [size]="'base'" [types]="'primary'" [dataTestId]="'edu-date-type'"></al-input>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'start Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Row: Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Type of Degree'" [placeholder]="'Type of Degree'" [value]="'Bachelor'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Description'" [placeholder]="'Education Description'"
+            [value]="'Studied Computer Science'" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Location'" [placeholder]="'Education Location'" [value]="'Oxford, UK'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+
+        <!-- Rich Text Editor Section -->
+        <app-flex-grid [type]="'column'" [gap]="16" [countMobile]="1" [countTablet]="1" [countDesktop]="1">
+          <app-custom-editor [isVisible]="true" [showTable]="true" [historyControls]="true" [autobullet]="true"
+            [showLabels]="true" leftLabelText="Document Title" rightLabelText="Page 1 of 5"
+            initialValue="<p>Start typing here...</p>" editScreenSection="GENERAL" actionType="edit"
+            [dataTestId]="'custom-editor-testid'" (contentChangeFromQuill)="onContentChange($event)"
+            (ApplyAIinQuill)="onAIApply($event)"></app-custom-editor>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
+    <al-tab labelText="Edu Without Date Type">
+      <h2>Education Section - Without Date Type</h2>
+      <p>Testing layout when Date Type field is not present</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'edu-without-date-type'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- Row: Current Study (checkbox), Start Date, End Date -->
+        <!-- Mobile: 3 rows (each field on own row) - Desktop: reordered -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="2" [desktop]="4" [gap]="'16px'" [minColumns]="2">
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-start-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Row: Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Type of Degree'" [placeholder]="'Type of Degree'" [value]="'Bachelor'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Description'" [placeholder]="'Education Description'"
+            [value]="'Studied Computer Science'" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Location'" [placeholder]="'Education Location'" [value]="'Oxford, UK'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+
+        <!-- Rich Text Editor Section -->
+        <app-flex-grid [type]="'column'" [gap]="16" [countMobile]="1" [countTablet]="1" [countDesktop]="1">
+          <app-custom-editor [isVisible]="true" [showTable]="true" [historyControls]="true" [autobullet]="true"
+            [showLabels]="true" leftLabelText="Document Title" rightLabelText="Page 1 of 5"
+            initialValue="<p>Start typing here...</p>" editScreenSection="GENERAL" actionType="edit"
+            [dataTestId]="'custom-editor-testid'" (contentChangeFromQuill)="onContentChange($event)"
+            (ApplyAIinQuill)="onAIApply($event)"></app-custom-editor>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
+    <al-tab labelText="3-Column Layout">
+      <h2>3-Column Layout Test</h2>
+      <p>Start Date → End Date → Checkbox (equal widths on desktop, checkbox first on mobile)</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'3-col-layout'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- 3-Column Layout: Start Date, End Date, Checkbox -->
+        <!-- Desktop: 3 equal columns (1fr each) -->
+        <!-- Mobile: Checkbox first (full width), then dates in row 2 -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="3" [desktop]="3" [gap]="'16px'" [minColumns]="3">
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-start-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+        </app-flex-grid>
+
+        <!-- Test: Checkbox FIRST (matching actual project DOM order) -->
+        <p style="margin-top: 24px; color: #666; font-size: 14px;"><strong>Test with Checkbox First (Actual [type]="'row'" [mobRow]="2" [tabRow]="3" [desktop]="3" [gap]="'16px'" [minColumns]="3" Project Order):</strong></p>
+        <app-flex-grid>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-start-date-2'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-end-date-2'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
     <al-tab labelText="CoverSheet">
       <h3>About Us</h3>
       <p>Learn more about our company and mission.</p>
@@ -158,4 +316,4 @@
       <p>Get in touch with us through various channels.</p>
     </al-tab>
   </al-tabs>
-</al-general-container>
+</al-general-container>

package/src/lib/toggle-buttons/toggle-buttons.component.html

@@ -2,11 +2,13 @@
   (change)="onSelectionChange($event.value)" [ngClass]="[getSizeClass(), vertical ? 'al-toggle-vertical' : '']">
 
   <mat-button-toggle *ngFor="let button of buttons" [value]="button.id" [disabled]="button.disabled"
-    [attr.aria-label]="button.label" [style.display]="'inline-flex'" [style.align-items]="'center'"
+    [attr.aria-label]="button.label" [matTooltip]="button.tooltip" [style.display]="'inline-flex'" [style.align-items]="'center'"
     [style.gap.px]="computeGap(button)" [attr.data-testid]="button.dataTestId || dataTestId">
 
     <!-- Icon (shown based on type) -->
-    <mat-icon *ngIf="(type === 'default' || type === 'icon-only') && button.icon?.trim()" class="button-icon">{{
+    <mat-icon *ngIf="(type === 'default' || type === 'icon-only') && button.icon?.trim()"
+              [fontSet]="button.fontSet || 'material-icons'"
+              class="button-icon">{{
       button.icon }}</mat-icon>
 
     <!-- Label (shown based on type) -->

package/src/lib/toggle-buttons/toggle-buttons.component.scss

@@ -3,6 +3,7 @@
    ============================================ */
 
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
 @import '../styles/colors.scss';
 @import '../styles/typography-classes.scss';
 
@@ -282,3 +283,18 @@ mat-button-toggle:focus-visible {
   outline: 2px solid $color-blue-500;
   outline-offset: 2px;
 }
+
+/* ============================================
+   MATERIAL SYMBOLS OUTLINED SUPPORT
+   ============================================ */
+
+/* Material Symbols Outlined font family */
+::ng-deep .material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+mat-button-toggle .mat-icon.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined' !important;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
+}