FluentUI2: fix missing icon sizes regression (#6487)

* FLuentUI2: Add missing icon sizes

* regression fix

* formating

* fix ui

---------

Co-authored-by: Mladen Macanovic <mladen.macanovic@gmail.com>

Author: njannink

Demos/Blazorise.Demo.Bootstrap5/wwwroot/index.html

@@ -13,6 +13,7 @@
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+    <link href="_content/Blazorise.Icons.Bootstrap/blazorise.icons.bootstrap.css?v=2.0.3.0" rel="stylesheet" />
 
     <link href="_content/Blazorise/blazorise.css?v=2.0.3.0" rel="stylesheet" />
     <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=2.0.3.0" rel="stylesheet" />

Demos/Blazorise.Demo/Pages/Tests/ButtonsPage.razor

@@ -217,6 +217,39 @@
             </CardBody>
         </Card>
     </Column>
+    <Column>
+        <Card Margin="Margin.Is4.FromBottom">
+            <CardHeader>
+                <CardTitle>Icon Buttons</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
+                    <Button Color="Color.Primary" Outline><Icon Name="IconName.Add" /></Button>
+                    <Button Color="Color.Secondary" Outline><Icon Name="IconName.Edit" /></Button>
+                    <Button Color="Color.Danger" Outline><Icon Name="IconName.Delete" /></Button>
+                    <Button Color="Color.Success">
+                        Submit <Icon Name="IconName.Send" Margin="Margin.Is2.FromStart" />
+                    </Button>
+                    <Button Color="Color.Warning" Disabled>
+                        <Icon Name="IconName.Undo" Margin="Margin.Is2.FromEnd" /> Disabled
+                    </Button>
+                </Div>
+            </CardBody>
+            <CardBody>
+                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
+                    <Buttons Margin="Margin.Is2.FromEnd">
+                        <Button Color="Color.Dark" Size="Size.Small" Outline><Icon Name="IconName.Bold" /></Button>
+                        <Button Color="Color.Dark" Size="Size.Small" Outline><Icon Name="IconName.Italic" /></Button>
+                        <Button Color="Color.Dark" Size="Size.Small" Outline><Icon Name="IconName.Calendar" /></Button>
+                    </Buttons>
+                    <Buttons>
+                        <Button Color="Color.Dark" Size="Size.Small" Outline><Icon Name="IconName.Image" /></Button>
+                        <Button Color="Color.Dark" Size="Size.Small" Disabled Outline><Icon Name="IconName.Link" /></Button>
+                    </Buttons>
+                </Div>
+            </CardBody>
+        </Card>
+    </Column>
 </Row>
 @code {
     private bool isLoading;

Source/Extensions/Blazorise.Icons.FluentUI/wwwroot/FluentSystemIcons-Resizable.css

@@ -16,6 +16,64 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ic {
+    font-size: 1em;
+}
+
+.icon-ic-xs {
+    font-size: .75em;
+}
+
+.icon-ic-sm {
+    font-size: .875em;
+}
+
+.icon-ic-lg {
+    font-size: 1.33333em;
+    line-height: .75em;
+    vertical-align: -.0667em;
+}
+
+.icon-ic-1x {
+    font-size: 1em;
+}
+
+.icon-ic-2x {
+    font-size: 2em;
+}
+
+.icon-ic-3x {
+    font-size: 3em;
+}
+
+.icon-ic-4x {
+    font-size: 4em;
+}
+
+.icon-ic-5x {
+    font-size: 5em;
+}
+
+.icon-ic-6x {
+    font-size: 6em;
+}
+
+.icon-ic-7x {
+    font-size: 7em;
+}
+
+.icon-ic-8x {
+    font-size: 8em;
+}
+
+.icon-ic-9x {
+    font-size: 9em;
+}
+
+.icon-ic-10x {
+    font-size: 10em;
+}
+
 .icon-ic_fluent_access_time_20_filled:before {
     content: "\e000";
 }