Material Symbols Sharp for Web

Material Symbols Sharp for Web is a NuGet package that provides a simple way to add Google's Material Symbols icons to your C# web applications. It is designed primarily for Blazor applications, allowing you to easily manage and use icons via constants in the AppIcons.cs class.

---

Features

• Provides a complete set of Material Symbols icons.
• Includes an AppIcons.cs class with predefined constants for every icon in the Material Symbols set.
• Uses a simple <span> or <i> tag with CSS class to integrate icons into your web pages.
• Seamless integration into C# - Razor projects.

---

Installation

1. Install the Material Symbols Sharp for Web NuGet package:

Install-Package MaterialSymbolsSharp.Web

2. After adding the NuGet package to your project, include the CSS file in your project's head tag:

<link href="_content/MaterialSymbolsSharp.Web/icons.css" rel="stylesheet" />

---

Now you can start using icons in your application. Simply reference the icons using the AppIcons constants. For example:

 @using MaterialSymbolsSharp.Web

<span class="@AppIcons.HOME"></span>

<span class="@AppIcons.HOME"></span> 

<span class="@AppIcons.HOME_AND_GARDEN"></span> 

<span class="@AppIcons.SUPERVISED_USER_CIRCLE_OFF"></span> 

Important: All icon names are written in UPPERCASE. Please ensure that you use uppercase letters when referencing icons in your project.

How to change Icon Appearance ?

.ms-sharp {
	  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 30;

	  font-size: 100px;

	  color: red;
}

Key points about the CSS:

• .ms-sharp is a class selector that targets elements with the class ms-outlined.
• font-variation-settings is used to customize various aspects of the icon's appearance:
• FILL controls the fill style (0 for outlined, 1 for filled).
• wght sets the weight (thickness) of the icon.
• GRAD determines the gradient style (0 for no gradient, 1 for rounded, 2 for sharp).
• opsz sets the optical size of the icon.

For more information please visit: https://m3.material.io/

By applying this CSS to elements with the ms-sharp class, you can customize the appearance of Material Icons to your liking.

Contributions

Contributions and feedback are welcome. If you encounter any issues, feel free to open an issue on GitHub.