Icon

Icons are symbols that represent an object or action. They are used to visually communicate core parts of the product and available actions. Icons are used in buttons, lists, inputs, and more. Icons can be used with or without text.

Basic link

The basic usage of the Icon component can be seen on the example below.

home settings delete lock

<x-mbc::icon name="home" />
<x-mbc::icon name="['settings', 'outlined']" />
<x-mbc::icon :name="['delete', 'round']" />
<x-mbc::icon
    name="lock"
    variant="two-tone"
/>

As seen on the example above, the name attribute is used to define the icon to be displayed. The value of the name attribute can be a string or an array. If the value is an array, the first element is the icon name, and the second element is the icon variant. However, The variant attribute also can be used to define the icon variant for convenience.

info

All available icon names can be found on the Google Material Icons open_in_new website.

Variant link

As mentioned before, the variant attribute can be used to define the icon variant. The available options are filled, outlined, round, sharp, and two-tone. The default value is filled.

You can also define the icon variant by using the icon name that can be seen on the Basic section.

home home home home home home

<x-mbc::icon name="home" />

<x-mbc::icon
name="home"
variant="filled"
/>

<x-mbc::icon
name="home"
variant="outlined"
/>

<x-mbc::icon
name="home"
variant="round"
/>

<x-mbc::icon
name="home"
variant="sharp"
/>

<x-mbc::icon
name="home"
variant="two-tone"
/>

Font Size link

The fontSize attribute can be used to define the size of the icon. The available options are the valid CSS font-size value.

home home home home home

<x-mbc::icon
    name="home"
    fontSize="1rem"
/>

<x-mbc::icon
    name="home"
    fontSize="2rem"
/>

<x-mbc::icon
    name="home"
    fontSize="3rem"
/>

<x-mbc::icon
    name="home"
    fontSize="4rem"
/>

<x-mbc::icon
    name="home"
    fontSize="5rem"
/>

Color link

The color attribute can be used to define the color of the icon. The available color options are valid CSS color value or the color name from the theme palette.

home bluetooth filter_vintage delete paid power_settings_new check_circle colorize colorize

<x-mbc::icon name="home" />

<x-mbc::icon
    name="bluetooth"
    color="primary"
/>

<x-mbc::icon
    name="filter_vintage"
    color="secondary"
/>

<x-mbc::icon
    name="delete"
    color="error"
/>

<x-mbc::icon
    name="paid"
    color="warning"
/>

<x-mbc::icon
    name="power_settings_new"
    color="info"
/>

<x-mbc::icon
    name="check_circle"
    color="success"
/>

<x-mbc::icon
    name="colorize"
    color="#FF0000"
/>

<x-mbc::icon
    name="colorize"
    color="aqua"
/>

Properties link

mbc::icon link

Name	Type	Default	Description
`color`	`string`		The color of the icon. The available color options are valid CSS color value or the color name from the theme palette.
`fontSize`	`string`		The size of the icon. The available options are the valid CSS font-size value.
`name`	`string\|array`		The name of the icon to be displayed. If the value is an array, the first element is the icon name, and the second element is the icon variant. All available icon names can be found on the Google Material Icons website.
`variant`	`string`	`filled`	The variant of the icon. The available options are `filled`, `outlined`, `round`, `sharp`, and `two-tone`.

References link

Edit this page