Blazor For Kids

Using Icons in BlazorForKids

Icons play a vital role in building modern, professional-looking applications. They help users navigate, understand actions, and interact with your UI more easily. In BlazorForKids, you have full control over how icons are rendered — whether using traditional CSS icon fonts or modern inline SVGs.

Where Icons Are Used

Many parts of the framework allow you to set an icon — for example, when configuring a page link:

        page.PageLink.Icon("fa-home"); // Using a CSS class
        page.PageLink.Icon(Icons.GRID_3X3); // Using an SVG icon
    

You can use either approach depending on your preferences and the icon library you're using.

Option 1: CSS-Based Icons (e.g., Font Awesome)

The first and most traditional way to add icons is by using a CSS class that renders an icon from a font or sprite sheet — for example, fa-home from Font Awesome.

Steps to Use CSS Icon Fonts:

1. Add the icon font CSS file (e.g., Font Awesome) to your project.
2. Reference it in App.razor or index.html / _Host.cshtml:

<link href="css/fontawesome.css" rel="stylesheet" />

3. Set the icon on the page or component using its class name:

            page.PageLink.Icon("fa-solid fa-users");
    

✅ This method works with any popular CSS-based icon library, such as Font Awesome, Material Icons, or Bootstrap Icons (if used as CSS).

Option 2: Inline SVG Icons (Preferred for Performance & Clarity)

BlazorForKids also supports rendering icons as inline SVG elements. This method offers better scalability, styling control, and performance — especially in modern apps.

Using BootstrapIconsForDotNet (Recommended)

To simplify SVG usage, BlazorForKids optionally includes a NuGet package with all Bootstrap Icons as SVG strings:

            dotnet add package BootstrapIconsForDotNet --version 1.0.2
    

This package contains a static Icons class with each Bootstrap icon exposed as a const string, ready to be used:

         page.PageLink.Icon(Icons.GRID_3X3); // Renders <svg> markup inline
    

🔧 You can browse the icons at: https://icons.getbootstrap.com

Rendering SVG Icons in UI

BlazorForKids provides a utility component called <BkSvg> to easily display SVG icons anywhere in your UI:

         <BkSvg Svg="@Icons.PEOPLE" />
    

This will render the raw SVG content inside the component with proper markup and styling support.

Creating Your Own SVG Icon Library

If you have custom SVGs you'd like to use in your project, you can create your own static class to store and reference them, following the same pattern as the official Icons class:

            public static class CustomIcons
            {
                public const string GRID_3X3_GAP = "<svg...></svg>";
                public const string LOGO = "<svg viewBox='0 0 16 16'...></svg>";
            }
    

You can then use your icons exactly the same way:

            page.PageLink.Icon(CustomIcons.LOGO);
            <BkSvg Svg="@CustomIcons.GRID_3X3_GAP" />
    

Which Option Should I Use?

Both options are valid, and it’s up to your project’s needs and preferences. Here’s a quick comparison:

Option	Pros	Cons
CSS Icon Classes	Easy to integrate, works with popular libraries	Requires loading external CSS, limited styling control
Inline SVG (e.g., with Icons class)	Fully customizable, no external dependencies, modern	Initial setup may be unfamiliar to some beginners

Summary

• Use page.PageLink.Icon(...) to set icons for pages or components
• You can use either a CSS class name (like "fa-home") or an inline SVG string
• The BootstrapIconsForDotNet NuGet package provides 1,000+ icons as SVG strings for easy use
• You can use the <BkSvg> component to render SVG icons anywhere in the UI
• For custom icons, create your own static class with SVG constants

🎨 Icons give life to your app — whether you choose CSS or SVG, BlazorForKids gives you full control to keep your UI clean, consistent, and professional.