Angular Icon Component Overview
The Ignite UI for Angular Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.
Angular Icon Example
Getting Started with Ignite UI for Angular Icon
To get started with the Ignite UI for Angular Icon component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxIconModule
in your app.module.ts file.
// app.module.ts
import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxIconModule,
...
]
})
export class AppModule {}
Alternatively, as of 16.0.0
you can import the IgxIconComponent
as a standalone dependency.
// home.component.ts
import { IgxIconComponent } from 'igniteui-angular';
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-icon [style.color]="color">home</igx-icon>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxIconComponent]
})
export class HomeComponent {
public color = '#e41c77';
}
Now that you have the Ignite UI for Angular Icon module or component imported, you can start using the igx-icon
component.
Using the Angular Icon
Icon Color
Use style.color
CSS property to change its default color:
<igx-icon [style.color]="'#e41c77'">home</igx-icon>
Inactive Icon
If you want to disable an icon, you can use the active
property:
<igx-icon [active]="false">volume_off</igx-icon>
Content Projection
You can set icons with content projection:
<igx-icon>bluetooth</igx-icon>
Icon Size
You can customize the icons using CSS. To change an icon size use the --size
CSS variable:
.custom-size {
--size: 56px;
}
SVG Icons
You can also use an SVG image as an icon. First, inject the IgxIconService
dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code.
Use the addSvgIcon
method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the addSvgIconFromText
method to import an SVG file, providing the SVG text content instead of the file URL.
- Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority.
- It is better not to provide image width and height in the SVG file.
- You may need additional polyfill scripts ("polyfills") for Internet Explorer.
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icons
this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}
<igx-icon name="contains" family="filter-icons"></igx-icon>
Material Symbols
Additionally, users can take advantage of the latest Material icons and their design variations included in the newly created Material Symbols Library
. To start using Material Symbols, first you have to add the library to your application:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
Then we need to inject the IgxIconService
dependency and make use of its setFamily
method so that Material Symbols can work with igx-icon
:
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family
this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}
Now, we are ready to add the desired icon into our markup and customize it using adjustable font styles:
<igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>
.custom-icon {
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 40
}
To learn more about Material Symbols styles please visit their official documentation
.
Server-side Rendering Note
Note
In case you have implemented server side rendering logic in your application using Angular Universal and have used the IgxIconService
to register icons, this may cause the following exception:
XMLHttpRequest is not defined. Could not fetch SVG from url.
In order to avoid this, execute the listed steps:
-
Install `xmlhttprequest`:
npm i xmlhttprequest
-
On the top of your `server.ts` file, add:
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
Styling
To get started with styling the icons, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the icon-theme
and accepts the parameters, required to customize the icon as desired.
$custom-icon-theme: icon-theme(
$color: #1481b8,
$disabled-color: #494949
);
Using CSS variables
The last step is to pass the custom icon theme in our application:
@include css-vars($custom-icon-theme);
Using Theme Overrides
In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.
If the component is using the Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
. To prevent the custom theme to leak into other components, be sure to include the :host
selector before ::ng-deep
:
:host {
::ng-deep {
@include icon($custom-icon-theme);
}
}
Demo
Custom sizing
You can either use the --size
variable, targeting the igx-icon
directly:
igx-icon {
--size: 50px;
}
Or you can use the universal --igx-icon-size
variable to target all instances:
<div class="my-app">
<igx-icon></igx-icon>
</div>
.my-app {
--igx-icon-size: 50px;
}
You can also use one of the predefined sizes, assigning it to the --ig-size
variable. The available values for --ig-size
are --ig-size-small
, --ig-size-medium
, and --ig-size-large
:
igx-icon {
--ig-size: var(--ig-size-medium);
}
Learn more about it in the Size article.
API References
Additional Resources
Our community is active and always welcoming to new ideas.