Icons

We use the official material-icons npm-package.

Size

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

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

<!-- icon.blade.php -->
    <i id="62bedd5a5f142" class="c-icon c-icon--size-xxl material-icons" translate="no" role="img" alt="" data-uid="62bedd5a5f13f">
                    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="62bedd5a5f3df" class="c-icon c-icon--color-primary c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bedd5a5f3db">
                    apps
            </i>

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

<!-- icon.blade.php -->
    <i id="62bedd5a5f47b" class="c-icon c-icon--color-default c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bedd5a5f477">
                    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="62bedd5a5f6c0" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bedd5a5f6bb">
                    close
            </i>

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

<!-- icon.blade.php -->
    <i id="62bedd5a5f743" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bedd5a5f740">
                    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