Icons

The icon system in MIZ is simple, scalable, and customizable. It allows defining icon sizes and prefixes through Sass variables for consistent usage across your project.

1. Icon Prefix #

Defines the prefix used in all icon-related class names.

            $icon-prefix: "icon";
            

                
SCSS
                
            
        

• Prefix used in all icon classes.
• Example: .icon-small , .icon-medium , .icon-large

2. Icon Sizes #

All icon sizes are defined through the $icon-size Sass map. You can modify or add custom sizes easily.

            $icon-size: (
    extra-large: 32px,
    large: 24px,
    medium: 20px,
    regular: 16px,
    small: 12px,
    extra-small: 10px
);
            

                
SCSS
                
            
        

• Generated classes example:

            .icon-extra-large {
    font-size: 32px;
}
.icon-medium {
    font-size: 20px;
}
.icon-small {
    font-size: 12px;
}
            

                
CSS
                
            
        

3. Usage Examples #

Use these classes directly in your HTML to apply icon sizing:

            <i class="fa-solid fa-user icon-extra-large"></i>
<i class="fa-solid fa-heart icon-large"></i>
<i class="fa-solid fa-star icon-small"></i>
            

                
HTML