material-symbols-class 0.9.6 → 0.35.0

package/README.md

@@ -1,6 +1,11 @@
 # [material-symbols-class](https://github.com/joelcorrales/material-symbols-class)
 
-This is a package that uses [material-symbols](https://github.com/marella/material-symbols/tree/main/material-symbols) to provide a way of using the icons just with classes.
+This package builds on [material-symbols](https://github.com/marella/material-symbols/tree/main/material-symbols) and allows you to use icons directly through CSS classes.
+It also provides additional utilities and variations such as `fill`, `grade`, `optical-size`, `weight`, `spin`, and `fix`(consistent width), all applied via classes.
+
+You can explore the [Homepage](https://joelcorrales.github.io/material-symbols-class/) to browse available icons and preview different utility classes in action.
+
+The library stays up to date automatically with the latest changes from the source repository.
 
 - [Installation](#installation)
 - [Usage](#usage)

package/index.css

@@ -27,8 +27,10 @@
 
 .msc,
 .msc-o,
-.msc-outlined {
+.msc-outlined,
+.material-symbols-outlined {
   font-size: 1.5em;
+  font-variation-settings: "FILL" var(--fill, 0), "wght" var(--wght, 400), "GRAD" var(--grad, 0), "opsz" var(--opsz, 24);
 }
 
 @font-face {
@@ -58,8 +60,10 @@
 }
 
 .msc-r,
-.msc-rounded {
+.msc-rounded,
+.material-symbols-rounded {
   font-size: 1.5em;
+  font-variation-settings: "FILL" var(--fill, 0), "wght" var(--wght, 400), "GRAD" var(--grad, 0), "opsz" var(--opsz, 24);
 }
 
 @font-face {
@@ -89,6 +93,8 @@
 }
 
 .msc-s,
-.msc-sharp {
+.msc-sharp,
+.material-symbols-sharp {
   font-size: 1.5em;
+  font-variation-settings: "FILL" var(--fill, 0), "wght" var(--wght, 400), "GRAD" var(--grad, 0), "opsz" var(--opsz, 24);
 }

package/index.min.css

@@ -1 +1 @@
-@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-outlined.woff2") format("woff2")}.material-symbols-outlined,.msc,.msc-o,.msc-outlined{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc,.msc-o,.msc-outlined{font-size:1.5em}@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-rounded.woff2") format("woff2")}.material-symbols-rounded,.msc-r,.msc-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-r,.msc-rounded{font-size:1.5em}@font-face{font-family:"Material Symbols Sharp";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-sharp.woff2") format("woff2")}.material-symbols-sharp,.msc-s,.msc-sharp{font-family:"Material Symbols Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-s,.msc-sharp{font-size:1.5em}
+@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-outlined.woff2") format("woff2")}.material-symbols-outlined,.msc,.msc-o,.msc-outlined{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc,.msc-o,.msc-outlined,.material-symbols-outlined{font-size:1.5em;font-variation-settings:"FILL" var(--fill, 0),"wght" var(--wght, 400),"GRAD" var(--grad, 0),"opsz" var(--opsz, 24)}@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-rounded.woff2") format("woff2")}.material-symbols-rounded,.msc-r,.msc-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-r,.msc-rounded,.material-symbols-rounded{font-size:1.5em;font-variation-settings:"FILL" var(--fill, 0),"wght" var(--wght, 400),"GRAD" var(--grad, 0),"opsz" var(--opsz, 24)}@font-face{font-family:"Material Symbols Sharp";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-sharp.woff2") format("woff2")}.material-symbols-sharp,.msc-s,.msc-sharp{font-family:"Material Symbols Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-s,.msc-sharp,.material-symbols-sharp{font-size:1.5em;font-variation-settings:"FILL" var(--fill, 0),"wght" var(--wght, 400),"GRAD" var(--grad, 0),"opsz" var(--opsz, 24)}

package/material-symbols.css

@@ -782,6 +782,110 @@
   content: "android";
 }
 
+.msc-android_cell_4_bar:after {
+  content: "android_cell_4_bar";
+}
+
+.msc-android_cell_4_bar_alert:after {
+  content: "android_cell_4_bar_alert";
+}
+
+.msc-android_cell_4_bar_off:after {
+  content: "android_cell_4_bar_off";
+}
+
+.msc-android_cell_4_bar_plus:after {
+  content: "android_cell_4_bar_plus";
+}
+
+.msc-android_cell_5_bar:after {
+  content: "android_cell_5_bar";
+}
+
+.msc-android_cell_5_bar_alert:after {
+  content: "android_cell_5_bar_alert";
+}
+
+.msc-android_cell_5_bar_off:after {
+  content: "android_cell_5_bar_off";
+}
+
+.msc-android_cell_5_bar_plus:after {
+  content: "android_cell_5_bar_plus";
+}
+
+.msc-android_cell_dual_4_bar:after {
+  content: "android_cell_dual_4_bar";
+}
+
+.msc-android_cell_dual_4_bar_alert:after {
+  content: "android_cell_dual_4_bar_alert";
+}
+
+.msc-android_cell_dual_4_bar_plus:after {
+  content: "android_cell_dual_4_bar_plus";
+}
+
+.msc-android_cell_dual_5_bar:after {
+  content: "android_cell_dual_5_bar";
+}
+
+.msc-android_cell_dual_5_bar_alert:after {
+  content: "android_cell_dual_5_bar_alert";
+}
+
+.msc-android_cell_dual_5_bar_plus:after {
+  content: "android_cell_dual_5_bar_plus";
+}
+
+.msc-android_wifi_3_bar:after {
+  content: "android_wifi_3_bar";
+}
+
+.msc-android_wifi_3_bar_alert:after {
+  content: "android_wifi_3_bar_alert";
+}
+
+.msc-android_wifi_3_bar_lock:after {
+  content: "android_wifi_3_bar_lock";
+}
+
+.msc-android_wifi_3_bar_off:after {
+  content: "android_wifi_3_bar_off";
+}
+
+.msc-android_wifi_3_bar_plus:after {
+  content: "android_wifi_3_bar_plus";
+}
+
+.msc-android_wifi_3_bar_question:after {
+  content: "android_wifi_3_bar_question";
+}
+
+.msc-android_wifi_4_bar:after {
+  content: "android_wifi_4_bar";
+}
+
+.msc-android_wifi_4_bar_alert:after {
+  content: "android_wifi_4_bar_alert";
+}
+
+.msc-android_wifi_4_bar_lock:after {
+  content: "android_wifi_4_bar_lock";
+}
+
+.msc-android_wifi_4_bar_off:after {
+  content: "android_wifi_4_bar_off";
+}
+
+.msc-android_wifi_4_bar_plus:after {
+  content: "android_wifi_4_bar_plus";
+}
+
+.msc-android_wifi_4_bar_question:after {
+  content: "android_wifi_4_bar_question";
+}
+
 .msc-animated_images:after {
   content: "animated_images";
 }
@@ -990,6 +1094,18 @@
   content: "arrow_selector_tool";
 }
 
+.msc-arrow_shape_up:after {
+  content: "arrow_shape_up";
+}
+
+.msc-arrow_shape_up_stack:after {
+  content: "arrow_shape_up_stack";
+}
+
+.msc-arrow_shape_up_stack_2:after {
+  content: "arrow_shape_up_stack_2";
+}
+
 .msc-arrow_split:after {
   content: "arrow_split";
 }
@@ -1254,6 +1370,10 @@
   content: "avg_time";
 }
 
+.msc-award_meal:after {
+  content: "award_meal";
+}
+
 .msc-award_star:after {
   content: "award_star";
 }
@@ -1474,6 +1594,58 @@
   content: "battery_android_bolt";
 }
 
+.msc-battery_android_frame_1:after {
+  content: "battery_android_frame_1";
+}
+
+.msc-battery_android_frame_2:after {
+  content: "battery_android_frame_2";
+}
+
+.msc-battery_android_frame_3:after {
+  content: "battery_android_frame_3";
+}
+
+.msc-battery_android_frame_4:after {
+  content: "battery_android_frame_4";
+}
+
+.msc-battery_android_frame_5:after {
+  content: "battery_android_frame_5";
+}
+
+.msc-battery_android_frame_6:after {
+  content: "battery_android_frame_6";
+}
+
+.msc-battery_android_frame_alert:after {
+  content: "battery_android_frame_alert";
+}
+
+.msc-battery_android_frame_bolt:after {
+  content: "battery_android_frame_bolt";
+}
+
+.msc-battery_android_frame_full:after {
+  content: "battery_android_frame_full";
+}
+
+.msc-battery_android_frame_plus:after {
+  content: "battery_android_frame_plus";
+}
+
+.msc-battery_android_frame_question:after {
+  content: "battery_android_frame_question";
+}
+
+.msc-battery_android_frame_share:after {
+  content: "battery_android_frame_share";
+}
+
+.msc-battery_android_frame_shield:after {
+  content: "battery_android_frame_shield";
+}
+
 .msc-battery_android_full:after {
   content: "battery_android_full";
 }
@@ -1958,6 +2130,10 @@
   content: "brick";
 }
 
+.msc-briefcase_meal:after {
+  content: "briefcase_meal";
+}
+
 .msc-brightness_1:after {
   content: "brightness_1";
 }
@@ -2054,6 +2230,10 @@
   content: "bubbles";
 }
 
+.msc-bucket_check:after {
+  content: "bucket_check";
+}
+
 .msc-bug_report:after {
   content: "bug_report";
 }
@@ -2138,14 +2318,26 @@
   content: "calendar_apps_script";
 }
 
+.msc-calendar_check:after {
+  content: "calendar_check";
+}
+
 .msc-calendar_clock:after {
   content: "calendar_clock";
 }
 
+.msc-calendar_lock:after {
+  content: "calendar_lock";
+}
+
 .msc-calendar_meal:after {
   content: "calendar_meal";
 }
 
+.msc-calendar_meal_2:after {
+  content: "calendar_meal_2";
+}
+
 .msc-calendar_month:after {
   content: "calendar_month";
 }
@@ -2670,6 +2862,10 @@
   content: "child_friendly";
 }
 
+.msc-child_hat:after {
+  content: "child_hat";
+}
+
 .msc-chip_extraction:after {
   content: "chip_extraction";
 }
@@ -3118,6 +3314,10 @@
   content: "controller_gen";
 }
 
+.msc-conversation:after {
+  content: "conversation";
+}
+
 .msc-conversion_path:after {
   content: "conversion_path";
 }
@@ -4754,6 +4954,10 @@
   content: "familiar_face_and_zone";
 }
 
+.msc-family_group:after {
+  content: "family_group";
+}
+
 .msc-family_history:after {
   content: "family_history";
 }
@@ -5102,6 +5306,10 @@
   content: "fitness_tracker";
 }
 
+.msc-fitness_trackers:after {
+  content: "fitness_trackers";
+}
+
 .msc-flag:after {
   content: "flag";
 }
@@ -6022,6 +6230,10 @@
   content: "hallway";
 }
 
+.msc-hanami_dango:after {
+  content: "hanami_dango";
+}
+
 .msc-hand_bones:after {
   content: "hand_bones";
 }
@@ -6614,6 +6826,10 @@
   content: "image_aspect_ratio";
 }
 
+.msc-image_inset:after {
+  content: "image_inset";
+}
+
 .msc-image_search:after {
   content: "image_search";
 }
@@ -6838,6 +7054,10 @@
   content: "jump_to_element";
 }
 
+.msc-kanji_alcohol:after {
+  content: "kanji_alcohol";
+}
+
 .msc-kayaking:after {
   content: "kayaking";
 }
@@ -7650,6 +7870,10 @@
   content: "mail";
 }
 
+.msc-mail_asterisk:after {
+  content: "mail_asterisk";
+}
+
 .msc-mail_lock:after {
   content: "mail_lock";
 }
@@ -7658,6 +7882,10 @@
   content: "mail_off";
 }
 
+.msc-mail_shield:after {
+  content: "mail_shield";
+}
+
 .msc-male:after {
   content: "male";
 }
@@ -7798,6 +8026,14 @@
   content: "maximize";
 }
 
+.msc-meal_dinner:after {
+  content: "meal_dinner";
+}
+
+.msc-meal_lunch:after {
+  content: "meal_lunch";
+}
+
 .msc-measuring_tape:after {
   content: "measuring_tape";
 }
@@ -8166,6 +8402,10 @@
   content: "mobile_text_2";
 }
 
+.msc-mobile_theft:after {
+  content: "mobile_theft";
+}
+
 .msc-mobile_ticket:after {
   content: "mobile_ticket";
 }
@@ -8254,6 +8494,10 @@
   content: "money_off";
 }
 
+.msc-money_range:after {
+  content: "money_range";
+}
+
 .msc-monitor:after {
   content: "monitor";
 }
@@ -8918,10 +9162,6 @@
   content: "nightlight";
 }
 
-.msc-nights_stay:after {
-  content: "nights_stay";
-}
-
 .msc-no_accounts:after {
   content: "no_accounts";
 }
@@ -9330,6 +9570,10 @@
   content: "page_info";
 }
 
+.msc-page_menu_ios:after {
+  content: "page_menu_ios";
+}
+
 .msc-pageless:after {
   content: "pageless";
 }
@@ -9390,6 +9634,10 @@
   content: "paragliding";
 }
 
+.msc-parent_child_dining:after {
+  content: "parent_child_dining";
+}
+
 .msc-park:after {
   content: "park";
 }
@@ -9418,6 +9666,10 @@
   content: "partner_exchange";
 }
 
+.msc-partner_heart:after {
+  content: "partner_heart";
+}
+
 .msc-partner_reports:after {
   content: "partner_reports";
 }
@@ -9518,6 +9770,10 @@
   content: "percent";
 }
 
+.msc-percent_discount:after {
+  content: "percent_discount";
+}
+
 .msc-pergola:after {
   content: "pergola";
 }
@@ -10630,6 +10886,10 @@
   content: "responsive_layout";
 }
 
+.msc-rest_area:after {
+  content: "rest_area";
+}
+
 .msc-restart_alt:after {
   content: "restart_alt";
 }
@@ -11030,6 +11290,10 @@
   content: "search_check_2";
 }
 
+.msc-search_gear:after {
+  content: "search_gear";
+}
+
 .msc-search_hands_free:after {
   content: "search_hands_free";
 }
@@ -11326,6 +11590,10 @@
   content: "settings_remote";
 }
 
+.msc-settings_seating:after {
+  content: "settings_seating";
+}
+
 .msc-settings_slow_motion:after {
   content: "settings_slow_motion";
 }
@@ -11398,6 +11666,10 @@
   content: "share_windows";
 }
 
+.msc-shaved_ice:after {
+  content: "shaved_ice";
+}
+
 .msc-sheets_rtl:after {
   content: "sheets_rtl";
 }
@@ -11550,10 +11822,6 @@
   content: "sign_language";
 }
 
-.msc-sign_language_2:after {
-  content: "sign_language_2";
-}
-
 .msc-signal_cellular_0_bar:after {
   content: "signal_cellular_0_bar";
 }
@@ -11814,6 +12082,10 @@
   content: "soap";
 }
 
+.msc-soba:after {
+  content: "soba";
+}
+
 .msc-social_distance:after {
   content: "social_distance";
 }
@@ -11826,6 +12098,10 @@
   content: "solar_power";
 }
 
+.msc-solo_dining:after {
+  content: "solo_dining";
+}
+
 .msc-sort:after {
   content: "sort";
 }
@@ -12834,6 +13110,10 @@
   content: "table_rows_narrow";
 }
 
+.msc-table_sign:after {
+  content: "table_sign";
+}
+
 .msc-table_view:after {
   content: "table_view";
 }
@@ -12870,6 +13150,10 @@
   content: "takeout_dining";
 }
 
+.msc-takeout_dining_2:after {
+  content: "takeout_dining_2";
+}
+
 .msc-tamper_detection_off:after {
   content: "tamper_detection_off";
 }
@@ -12894,6 +13178,10 @@
   content: "task_alt";
 }
 
+.msc-tatami_seat:after {
+  content: "tatami_seat";
+}
+
 .msc-taunt:after {
   content: "taunt";
 }
@@ -13114,6 +13402,10 @@
   content: "thumbnail_bar";
 }
 
+.msc-thumbs_up_double:after {
+  content: "thumbs_up_double";
+}
+
 .msc-thumbs_up_down:after {
   content: "thumbs_up_down";
 }
@@ -13622,6 +13914,10 @@
   content: "u_turn_right";
 }
 
+.msc-udon:after {
+  content: "udon";
+}
+
 .msc-ulna_radius:after {
   content: "ulna_radius";
 }
@@ -14510,6 +14806,10 @@
   content: "window_sensor";
 }
 
+.msc-windshield_defrost_auto:after {
+  content: "windshield_defrost_auto";
+}
+
 .msc-windshield_defrost_front:after {
   content: "windshield_defrost_front";
 }
@@ -14578,6 +14878,10 @@
   content: "wysiwyg";
 }
 
+.msc-yakitori:after {
+  content: "yakitori";
+}
+
 .msc-yard:after {
   content: "yard";
 }