Added MdIcon demo page and added utility MdIconInline (not published …

…yet).

BlazorMaterialWeb.Demo/Pages/Icon.razor

@@ -0,0 +1,77 @@
+@page "/icon"
+
+<ComponentDemoPage Name="Icon"
+ DesignUrl="https://m3.material.io/styles/icons/overview"
+ ComponentUrl="https://github.com/material-components/material-web/blob/main/docs/components/icon.md"
+ ComponentSourcePath="icon"
+ BlazorComponentSourcePath="MdIcon.razor"
+ BlazorDemoSourceName="Icon">
+ <Description>
+ Icons are small symbols for actions or other items
+ </Description>
+ <ComponentDemo>
+ <MarkdownBlock>
+ `MdIcon` (which renders `&lt;md-icon`) has a fixed size determined
+ by `.material-symbols-outlined` (or other classes) CSS (24px)
+ and right now there is no easy way to change it (see [this issue](https://github.com/material-components/material-web/issues/5055)).
+
+ Blazor Material Web provides a utility component `MdIconInline`
+ which set `font-size`, `font-weight`, `font-style` and `line-height`
+ to `inherit` as well `vertical-align` to `middle`.
+ Note that `MdIconInline` does not render `&lt;md-icon>` element but a
+ `span` with `material-symbols-outlined` class. You can customize it
+ with `IconClass`. If you need to add additional CSS classes, use
+ `Class` (uppercase) Blazor parameter.
+ </MarkdownBlock>
+
+ <div style="
+font-size: @(fontSize)px;
+font-weight: @(fontWeight);
+font-style: @(fontStyleItalic ? "italic" : "normal")">
+ <p>
+ <span>MdIcon:</span>
+ <MdIcon>@(icon)</MdIcon>
+ </p>
+
+ <p>
+ <span>MdIconInline:</span>
+ <MdIconInline IconClass="@(MdIconInline.IconOutlined)"
+ Class="extra-class">
+ @(icon)
+ </MdIconInline>
+ </p>
+ </div>
+ </ComponentDemo>
+ <Tweaks>
+ <MdTextField @bind-Value="icon" Label="Icon content" />
+
+ <div>
+ <label>
+ Font size:
+ <MdSlider @bind-Value="fontSize"
+ Min="1" Max="100" Labeled="true" />
+ </label>
+ <span>@(fontSize)</span>
+ </div>
+
+ <div>
+ <label>
+ Font weight:
+ <MdSlider @bind-Value="fontWeight"
+ Min="100" Max="800" Step="100" Labeled="true" />
+ </label>
+ <span>@(fontWeight)</span>
+ </div>
+
+ <LabeledSwitch @bind-Selected="fontStyleItalic" Label="Italic" />
+ </Tweaks>
+</ComponentDemoPage>
+
+@code {
+
+ string icon = "send";
+ int fontSize = 30;
+ int fontWeight = 400;
+ bool fontStyleItalic;
+
+}

BlazorMaterialWeb.Demo/Shared/PageNav.razor

@@ -15,6 +15,7 @@
  ("Elevation", "/elevation"),
  ("Floating action buttons (FAB)", "/fab"),
  ("Focus Ring", "/focus-ring"),
+ ("Icon", "/icon"),
  ("Icon Buttons", "/icon-buttons"),
  ("Lists", "/lists"),
  ("Menus", "/menu"),

BlazorMaterialWeb/MdIconInline.razor

@@ -0,0 +1,5 @@
+@inherits DefaultMdComponent
+
+<span class="@(IconClass) @(Class)" @ref="el" @attributes="AdditionalAttributes">
+ @(ChildContent)
+</span>

BlazorMaterialWeb/MdIconInline.razor.cs

@@ -0,0 +1,16 @@
+namespace BlazorMaterialWeb;
+
+partial class MdIconInline
+{
+
+ public const string IconSharp = "material-symbols-sharp";
+ public const string IconOutlined = "material-symbols-outlined";
+ public const string IconRound = "material-symbols-round";
+
+ [Parameter]
+ public string IconClass { get; set; } = IconOutlined;
+
+ [Parameter]
+ public string Class { get; set; } = "";
+
+}

BlazorMaterialWeb/MdIconInline.razor.css

@@ -0,0 +1,9 @@
+.material-symbols-sharp,
+.material-symbols-rounded,
+.material-symbols-outlined {
+ font-size: inherit;
+ font-weight: inherit;
+ font-style: inherit;
+ line-height: inherit;
+ vertical-align: middle;
+}

README.MD

@@ -38,6 +38,7 @@ This project depends on Google's [Material Web Component](https://github.com/mat
 | Dialog | ✅ | ✅ | [Dialog](https://blazorwebmaterial.lukevo.com/dialog) |
 | Divider | ✅ | ✅ | [Divider](https://blazorwebmaterial.lukevo.com/divider) |
 | Elevation | ✅ | ✅ | [Elevation](https://blazorwebmaterial.lukevo.com/elevation) |
+| Icon | ✅ | ✅ | [Icon](https://blazorwebmaterial.lukevo.com/icon) |
 | Focus ring | ✅ | ✅ | [Focus Ring](https://blazorwebmaterial.lukevo.com/focus-ring) |
 | List | ✅ | ✅ | [List](https://blazorwebmaterial.lukevo.com/lists) |
 | Menu | ✅ | ✅ | [Menus](https://blazorwebmaterial.lukevo.com/menu) |