Icon
The Ignite UI for Angular Icon component unifies icon/font sets so developers can use them interchangeably and add material icons to markup. The component supports custom colors. Icons can be set as inactive.
Icon Demo
Dependencies
The Icon component is exported as an NgModule
, thus all you need to do in your application is to import the IgxIconModule
inside your AppModule
:
// app.module.ts
import { IgxIconModule } from 'igniteui-angular';
@NgModule({
imports: [
...
IgxIconModule,
...
]
})
export class AppModule {}
Usage
Using igx-icon
to set an active
home icon with magenta color
.
<igx-icon color="magenta">home</igx-icon>
Setting an inactive icon.
<igx-icon [isActive]="false">volume_off</igx-icon>
Setting icon with content projection.
<igx-icon color="red">bluetooth</igx-icon>
You can set the icon's size through CSS. Create a custom CSS class and name it custom-size. The icon's size is changed by the font-size property. Additionally to center it, set the width and the height to the same value.
<igx-icon color="#0375be" class="custom-size">phone_iphone</igx-icon>
<!-- icon-sample2.component.scss -->
.custom-size{
font-size: 56px;
width: 56px;
height: 56px;
}
SVG Icons
You can also use a SVG image as an icon. First, inject IgxIconService
dependency. In this example IgxIconService
dependency is injected 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. Icon name and file URL path are method's mandatory parameters; you can specify font-set as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the addSvgIconFromText
method to import the 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 font-set - 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.
// svg-icon-sample.ts
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icons
this.iconService.addSvgIcon("contains", "/assets/images/svg/contains.svg", "filter-icons");
}
<!-- svg-icon-sample.html -->
<igx-icon name="contains" fontSet="filter-icons"></igx-icon>
Breaking Changes in 6.2.0
- The
IgxIconComponent
iconName
property is deprecated. To set the icon name for 'material' icons, place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons, use thename
property.
API References
Additional Resources
Our community is active and always welcoming to new ideas.