Icons

We use the official material-icons npm-package.

Size 

<!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c6e2">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c74a">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c78f">
                    </span>
@icon(['icon' => 'apps', 'size' => 'md'])
@endicon

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

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

Color 

<!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-primary c-icon--size-lg" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c80d">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-secondary c-icon--size-lg" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c856">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-default c-icon--size-lg" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c892">
                    </span>
@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 

<!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c906">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--more-vert c-icon--material c-icon--material-more_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" material-symbol="more_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c941">
                    </span>

    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c7c3c978">
                    </span>
@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 or a url to a svg file
color string - The color of the icon
customColor string - A custom HEX color
componentElement span string - Icon HTML tag
filled NULL - If the icons should be filled or not
decorative false boolean - If the icon is decorative only or serves a purpose.
backgroundColor false boolean - A hex color for the background or false if not defined
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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Icon/icon.json