Add icons and tidy

vizro-core/examples/kpi/app.py

@@ -28,6 +28,7 @@
                 title="Total Complaints",
                 value_format="{value:.0f}",
                 reference_format="{delta_relative:+.1%} vs. 2018 ({reference:.0f})",
+                icon="person",
             ),
         ),
         vm.Figure(
@@ -38,6 +39,7 @@
                 title="Closed Complaints",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+                icon="inventory",
             )
         ),
         vm.Figure(
@@ -48,6 +50,7 @@
                 title="Timely Response",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+                icon="timer",
             )
         ),
         vm.Figure(
@@ -58,6 +61,7 @@
                 title="Closed w/o cost",
                 value_format="{value:.1f}%",
                 reference_format="{delta:.1f}pp vs. 2018 ({reference:.1f}%)",
+                icon="payments",
             )
         ),
         vm.Figure(
@@ -68,6 +72,7 @@
                 title="Consumer disputed",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp vs. 2018 ({reference:.1f}%)",
+                icon="sentiment_dissatisfied",
             )
         ),
     ],

vizro-core/examples/kpi/utils/_charts.py

@@ -25,9 +25,6 @@ def build(self):
         )
 
 
-vm.Container.add_type("components", FlexContainer)
-
-
 # CUSTOM CHARTS ----------------------------------------------------------------
 @capture("graph")
 def bar(

vizro-core/src/vizro/static/css/figures.css

@@ -40,7 +40,7 @@ Note the relative url works with both serve_locally=True and serve_locally=False
  bootstrap font tokens, leading to deviations which we need to overwrite. */
 .card-kpi-title {
   font-size: 1.2rem;
-  line-height: 1;
+  line-height: normal;
   margin: 0;
 }