Version: 0.0.10.1.00.1.10.2.00.2.10.3.00.3.10.3.20.4.00.4.10.4.20.4.30.4.40.5.00.6.00.7.00.7.10.7.20.7.30.7.40.7.50.7.60.7.70.8.00.8.10.8.20.9.00.9.10.9.20.9.30.9.40.9.50.9.60.10.00.10.10.10.20.10.30.10.40.11.00.12.00.13.00.14.00.14.10.15.00.15.10.15.20.15.30.15.40.15.50.15.60.15.70.15.80.15.90.16.00.16.10.17.00.18.00.19.00.19.10.20.00.20.10.20.20.21.00.21.10.21.20.22.00.22.10.23.00.24.00.25.00.25.10.25.20.25.30.25.40.26.00.26.10.26.20.27.00.27.10.27.20.27.30.27.40.27.50.27.60.27.70.28.00.29.00.29.10.29.20.29.30.30.00.30.10.30.20.30.30.31.00.31.10.31.20.31.30.31.41.0.01.0.11.0.21.0.41.0.51.1.01.2.01.2.11.2.21.2.31.2.41.2.51.2.61.2.71.2.81.2.91.2.101.2.111.3.01.3.11.3.21.3.31.3.41.3.51.3.61.3.71.3.81.3.91.3.101.4.01.4.11.4.21.4.31.5.01.5.11.5.21.6.01.6.11.6.21.6.31.6.42.0.02.0.12.0.22.0.32.0.42.0.52.0.62.0.72.0.82.0.92.1.02.1.12.2.02.3.02.3.12.3.22.3.32.3.42.3.52.3.62.3.72.3.82.4.02.4.12.4.22.4.32.5.02.5.12.6.02.6.12.6.22.7.02.7.12.7.22.7.32.7.42.7.52.7.62.7.72.7.82.7.92.7.102.7.112.7.122.8.02.8.12.8.22.8.32.8.42.8.52.8.62.8.72.8.8-rc12.8.8-rc22.8.8-rc32.8.8-rc42.8.8-rc52.8.8
.icon {
width: 32px;
height: 32px;
vertical-align: middle;
&.icon-padded {
padding: 8px;
}
&.icon-xs {
width: 16px;
height: 16px;
padding: 4px;
&.icon-sm {
width: 24px;
height: 24px;
padding: 6px;
&.icon-lg {
width: 48px;
height: 48px;
padding: 12px;
&.icon-xl {
width: 64px;
height: 64px;
padding: 16px;
// Force color when icon-color class is explicitly used
@each $color, $value in $theme-colors {
.icon-#{$color} {
fill: $value !important;