Usage
The icon component allows you to easily integrate SVG or font icons into your application to enhance the UI.
<LumexIcon Icon="@Icons.Rounded.Favorite" />
<LumexIcon Icon="@Icons.Rounded.Settings" />
<LumexIcon Icon="@Icons.Rounded.Person" />
<LumexIcon Icon="@Icons.Rounded.Home" />
<LumexIcon Icon="@Icons.Rounded.Bed" />
Colors
Change the color of the icon to match your application’s theme or to highlight specific icons.
<LumexIcon Color="@ThemeColor.Default" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Primary" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Secondary" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Success" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Warning" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Danger" Icon="@Icons.Rounded.Favorite" />
<LumexIcon Color="@ThemeColor.Info" Icon="@Icons.Rounded.Favorite" />
Dimensions
You can customize the icon’s size to fit different layouts or design needs.
If the icon is an SVG, the dimensions are applied to the width and height attributes.
@using static LumexUI.LumexIcon
<LumexIcon Size="@(new Dimensions("16"))" Icon="@Icons.Rounded.Home" />
<LumexIcon Size="@(new Dimensions("20"))" Icon="@Icons.Rounded.Home" />
<LumexIcon Size="@(new Dimensions("24"))" Icon="@Icons.Rounded.Home" />
<LumexIcon Size="@(new Dimensions("28"))" Icon="@Icons.Rounded.Home" />
<LumexIcon Size="@(new Dimensions("32"))" Icon="@Icons.Rounded.Home" />
<div class="w-9 h-9">
<LumexIcon Size="@(new Dimensions("100%"))" Icon="@Icons.Rounded.Home" />
</div>
For font icons, the size corresponds to the font size in pixels.
@using static LumexUI.LumexIcon
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=accessibility" />
<LumexIcon Size="@(new Dimensions("16"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
<LumexIcon Size="@(new Dimensions("20"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
<LumexIcon Size="@(new Dimensions("24"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
<LumexIcon Size="@(new Dimensions("28"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
<LumexIcon Size="@(new Dimensions("32"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
<LumexIcon Size="@(new Dimensions("36"))" Icon="material-symbols-outlined">
accessibility
</LumexIcon>
Custom Styles
You can customize the icon component by passing any Tailwind CSS
classes to the component's Class and/or Style parameters.
<LumexIcon Icon="@Icons.Rounded.Bed" Size="@new("40")" Class="text-indigo-500" />
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.