@page "/icon"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Icon
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor Icon component renders Material icons with control over size and color, plus support for custom icon fonts.
</RadzenText>

<RadzenText Anchor="icon#material-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Material Icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default, the <code>RadzenIcon</code> component uses the embedded in Radzen Blazor Components <code>MaterialSymbolsOutlined.woff2</code> font containing more than 2,500 glyphs. <RadzenLink Path="https://fonts.google.com/icons?icon.set=Material+Symbols" Text="See all Material Symbols ↗" target="_blank"/>
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconMaterial">
    <IconMaterial />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    <RadzenLink Path="https://fonts.google.com/icons?icon.set=Material+Symbols" Text="See all Material Symbols" target="_blank"/>
</RadzenText>

<RadzenText Anchor="icon#icon-color" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Icon color
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IconColor</code> property to set custom icon foreground color.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconColor">
    <IconColor />
</RadzenExample>

<RadzenText Anchor="icon#filled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Filled icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>font-variation-settings</code> CSS property for filled icons with the Material Symbols font. Note that some icons cannot be filled because they lack elements that allow for filling.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconFilled">
    <IconFilled />
</RadzenExample>

<RadzenText Anchor="icon#styled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Styled icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"class="rz-mb-8">
    Use <code>IconStyle</code> property to modify the icons foreground color. It offers the standard styles defined by the theme.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconStyles">
    <IconStyles />
</RadzenExample>

<RadzenText Anchor="icon#icons-width-other-fonts" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Using RadzenIcon with other icon fonts
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    You can use any icon font supporting ligatures with the <code>RadzenIcon</code> component. To do so, you need to load the font file using the CSS <code>@@font-face</code> at-rule and set the corresponding font-family name to the <code>--rz-icon-font-family</code> CSS variable. The example below uses Material Symbols Rounded font.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    RadzenIcon with Material Symbols Rounded font
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Material Symbols and Material Symbols Rounded are variable fonts containing multiple stylistic variations e.g. you can control the boldness of the icon using the <code>font-weight:</code> CSS property.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="MaterialRoundedIconFonts">
    <MaterialRoundedIconFonts />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    Read more about <RadzenLink Path="https://fonts.google.com/knowledge/glossary/variable_fonts" Text="variable fonts" target="_blank" />.
</RadzenText>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8 rz-mb-8">
    RadzenIcon with Material Symbols font loaded from Google Fonts.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    For full control over the icon font content and styles, you can load the Material Symbols font from Google Fonts and set the <code>--rz-icon-font-family</code> CSS variable accordingly.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="GoogleFontsMaterialSymbols">
    <GoogleFontsMaterialSymbols />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8 rz-mb-8">
    RadzenIcon with FontAwesome font
</RadzenText>
<RadzenExample ComponentName="Icon" Example="FontAwesomeIconFonts">
    <FontAwesomeIconFonts />
</RadzenExample>
<RadzenRow>
    <RadzenColumn Size="12">
        <RadzenText Anchor="icon#video-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
            How to Use RadzenIcon in Radzen Blazor Studio
        </RadzenText>
        <RadzenText TextStyle="TextStyle.Subtitle1">
            This video shows how to select icons visually, adjust colors and styles.
        </RadzenText>
    <RadzenCard Variant="Variant.Outlined" class="rz-p-7">
        <div class="embed-container">
            <iframe src="https://www.youtube.com/embed/sNmVfei8ijU?&rel=0" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </RadzenCard>
    </RadzenColumn>
</RadzenRow>