Angular components for icons in digital and software products using the Carbon Design System
To install @carbon/icons-angular
in your project, you will need to run the
following command using npm:
npm install -S @carbon/icons-angular
If you prefer Yarn, use the following command instead:
yarn add @carbon/icons-angular
Icons in this package support the following sizes: 16
, 20
, 24
, and 32
pixels. These sizes refer to the width and height of the icon. To reduce bundle
sizes each icon is exported as it's own module, you can use an icon component in
your project by doing the following:
In your module:
import { AddModule } from '@carbon/icons-angular';
@NgModule({
// ...
imports: [
// ...
AddModule,
// ...
],
// ...
})
export class MyModule {}
In your component template:
<!-- ... -->
<!-- the directive should be preferd whenever possible -->
<svg ibmIconAdd size="32"></svg>
<!-- but a component is also available -->
<ibm-icon-add size="32"></ibm-icon-add>
<!-- ... -->
In your module:
import { Add32Module } from '@carbon/icons-angular/lib/add/32.js';
@NgModule({
// ...
imports: [
// ...
Add32Module,
// ...
],
// ...
})
export class MyModule {}
Note: if you would like to find the import path for an icon, you can reference our icon preview
In your component template:
<!-- ... -->
<svg ibmIconAdd32></svg>
<!-- or -->
<ibm-icon-add32></ibm-icon-add32>
<!-- ... -->
Options available to the icon directive or component:
# @Input() size: string;
Choses the size of the component. Note: not available for icons specified by direct path
Example:
<ibm-icon-add size="16"></ibm-icon-add>
# @Input() innerClass: string;
Applies a classList
to the inner SVG. Use the normal class
attribute to
apply classes to the host element.
Example:
<ibm-icon-add size="16" innerClass="inner-class" class="host-class"></ibm-icon-add>
would result in
<ibm-icon-add size="16" class="host-class">
<svg class="inner-class"><!-- ... --></svg>
</ibm-icon-add>
# @Input() ariaLabel: string;
If supplied, should provide an accessible description of the icon.
Example:
<ibm-icon-add size="16" ariaLabel="Add a new item"></ibm-icon-add>
# @Input() ariaLabelledby: string;
If supplied, should link to an element providing an accessible description of the icon.
Example:
<label id="itemAddLabel">Add a new item</label>
<ibm-icon-add size="16" ariaLabelledby="itemAddLabel"></ibm-icon-add>
# @Input() ariaHidden: boolean;
Controls the visibility of the underlying SVG to screen readers.
Example:
<ibm-icon-add size="16" ariaHidden="true"></ibm-icon-add>
# @Input() title: string;
Adds a <title>
element to the inner SVG. Most browsers will display this text
as a tooltip when the icon is hovered.
Example:
<ibm-icon-add size="16" title="Add a new item"></ibm-icon-add>
# @Input() focusable: boolean;
Enables or disables the focusable
attribute. Set this to explicitly control
whether the underlying element should receive focus. Defaults to false
in most
cases.
Example:
<ibm-icon-add size="16" focusable="false"></ibm-icon-add>
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.