Icon Component

Overview

The Icon component is a simple wrapper component around the Material Icons font. The Icon component will let you easily render Material Icons on your MPage.

Required Imports

To use the icon component in your component, you must import the MpageIconComponent from @clinicaloffice/mpage-developer. You must also include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageIconComponent} from '@clinicaloffice/mpage-developer';

@Component({
    selector: 'your-component',
    imports: [MpageIconComponent],
    templateUrl: './your-component.component.html',
    styleUrl: './your-component.component.scss',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

The icon component has no properties and simply expects a valid Material Icon name as content in the mpage-icon HTML element in the format of <mpage-icon>Icon Name</mpage-icon>

<mpage-icon>settings</mpage-icon>            // Returns settings

The mpage-icon respects your font settings and will apply the current font color and sizing as if it were any other piece of text. You can change the color or size by assigning a HTML class or style attribute to your icon component or the parent component.

<mpage-icon style="font-size: xxx-large; color: blue">settings</mpage-icon>    // Returns settings

Alternative Method

You can achieve the same effect as the icon component by using <span> elements combined with a class of "material-icons". The example below illustrates this. The alternative method does not require you to add the imports identified above, however, depending on your usage, the amount of code your write may be more.

<span class="material-icons">help</span>     // Returns help