Icons

We use the official material-icons npm-package.

Size

apps apps apps

<!-- icon.blade.php -->
    <i id="61efbcd8bc5fa" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bc5f1">
                    apps
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bc657" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bc653">
                    apps
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bc69e" class="c-icon c-icon--size-xxl material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bc69b">
                    apps
            </i>
@icon(['icon' => 'apps', 'size' => 'md'])
@endicon

@icon(['icon' => 'apps', 'size' => 'lg'])
@endicon

@icon(['icon' => 'apps', 'size' => 'xxl'])
@endicon

Color

apps apps apps

<!-- icon.blade.php -->
    <i id="61efbcd8bc946" class="c-icon c-icon--color-primary c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bc940">
                    apps
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bc9ad" class="c-icon c-icon--color-secondary c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bc9a7">
                    apps
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bca16" class="c-icon c-icon--color-default c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bca12">
                    apps
            </i>
@icon(['icon' => 'apps', 'size' => 'lg','color' => 'primary'])
@endicon

@icon(['icon' => 'apps', 'size' => 'lg', 'color' => 'secondary'])
@endicon

@icon(['icon' => 'apps', 'size' => 'lg','color' => 'default'])
@endicon

Name

close more_vert apps

<!-- icon.blade.php -->
    <i id="61efbcd8bcc8f" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bcc8a">
                    close
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bccd9" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bccd5">
                    more_vert
            </i>

<!-- icon.blade.php -->
    <i id="61efbcd8bcd1c" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efbcd8bcd18">
                    apps
            </i>
@icon(['icon' => 'close', 'size' => 'lg'])
    Icon label will be deprecated
@endicon

@icon(['icon' => 'more_vert', 'size' => 'lg'])
    Icon label will be deprecated
@endicon

@icon(['icon' => 'apps', 'size' => 'lg'])
    Icon label will be deprecated
@endicon

Blade component parameters

Key Default value Type Available values Description
size inherit string - Sizes: xs, sm, md, lg, xl, xxl
label string - A label on the icon
icon string - The icon name
color string - The color of the icon
componentElement i string - Icon HTML tag
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Icon/icon.json