How to fill only 1 icon while using material symbols outlined?

by

Summary

The issue at hand is customizing Material Symbols to fill only one icon, specifically the ‘favorite’ icon, while using outlined icons for the rest. The goal is to visually indicate when a user has liked a recipe on a website.

Root Cause

The root cause of this issue lies in the incorrect application of font variation settings. The attempted solution using font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; does not work as expected due to:

  • Incorrect syntax or parameter values
  • Lack of support for the ‘FILL’ axis in the used font
  • Overriding or conflicting CSS rules

Why This Happens in Real Systems

This issue occurs in real systems due to:

  • Insufficient understanding of how font variation settings work
  • Inconsistent font support across different browsers and devices
  • Complexity of CSS rules and potential conflicts between them
  • Limited documentation or examples for specific use cases

Real-World Impact

The real-world impact of this issue includes:

  • Inconsistent user interface: The like system may not be clearly indicated, leading to user confusion
  • Poor user experience: Users may not be able to easily determine if they have already liked a recipe
  • Decreased engagement: A poorly designed like system can lead to decreased user engagement and interaction with the website

Example or Code

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0;
}

.favorite-icon {
  font-variation-settings: 'FILL' 1;
}

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Verifying font support for the ‘FILL’ axis
  • Using the correct syntax for font variation settings
  • Applying specific CSS rules to target the desired icon
  • Testing and iterating to ensure cross-browser and cross-device compatibility

Why Juniors Miss It

Junior engineers may miss this issue due to:

  • Lack of experience with font variation settings and Material Symbols
  • Insufficient understanding of CSS rules and conflicts
  • Limited testing and iteration to ensure compatibility and correctness
  • Overreliance on documentation without exploring specific use cases and examples

Leave a Comment