A graphical representation of an idea.
See the Icons section for more information, including a list of all available icons.
Using icons in buttons
Icons can be used inside other components, like buttons. For demos of how to use icons inside buttons, see the Button documentation.
Icons support a few different pre-defined size options. Right now the supported sizes are:
size property is provided, the
medium size will be used by default.
x-small icon size is only intended for use in certain special cases. Most components should use Icons in
|The SVG path or an object containing that path plus other data.|
|Accessible label for the icon. If not included, the icon will be hidden from screen readers via |
|Explicitly set the language code to use for the icon. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang. Defaults to the lang attribute of the nearest ancestor at mount time.|
|Explicitly set the direction to use for the icon. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir. Defaults to the computed direction at mount time.|
|Specify icon size by choosing one of several pre-defined size options. See the type documentation for supported size options. The |
CSS-only components are experimental and not yet available for use inside MediaWiki.
.cdx-mixin-css-icon() to an empty
<span> element. The parameters of the mixin are as follows:
|The icon to use, in the form of a Less variable. These variables are also provided by the mixin file. The syntax for the Less variable version of an icon name is |
|The hex code of the fill color of the icon|
|The icon size|
|Whether the icon is inside of a |
Before importing the
css-icon mixin, you must first import the design tokens. If you don't, you will get errors that look like
variable @color-base is undefined.
Visit the Button docs for details on using CSS icons within buttons.
Use the second parameter of the
@param-fill-color, to apply a hex code as the SVG fill color.
Use the third parameter of the
@param-size-icon, to use one of the pre-defined size options (
Arrow next (extra-small)
The CSS icon mixin supports icons that differ between the left-to-right (LTR) and right-to-left (RTL) reading directions. To take advantage of this behavior, in RTL contexts, one of the following is required:
dir="rtl"attribute set on the
dir="rtl"attribute set directly on the icon span.
In RTL contexts, ensure that a
dir="rtl" attribute is set either on the
<html> element or on the icon element itself.
The CSS-only icons mixin supports icons with language-specific variants.