mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
|
|
|
|
<!-- HEADER -->
|
|
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
<div fxLayout="column" fxLayoutAlign="center start">
|
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon class="secondary-text s-16">home</md-icon>
|
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
|
<span class="secondary-text">User Interface</span>
|
|
</div>
|
|
<div class="h1 mt-16">Icons</div>
|
|
</div>
|
|
|
|
<a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank">
|
|
<md-icon>link</md-icon>
|
|
<span>Reference</span>
|
|
</a>
|
|
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content p-24">
|
|
|
|
<div fxLayout="row" fxLayoutAlign="center center">
|
|
<md-spinner *ngIf="loading" color="accent"></md-spinner>
|
|
</div>
|
|
|
|
<div *ngIf="!loading">
|
|
|
|
<div fxLayout="column">
|
|
|
|
<div class="m-32">
|
|
<md-input-container class="w-100-p">
|
|
<input mdInput placeholder="Search an icon..." (input)="filterIcons($event)">
|
|
</md-input-container>
|
|
</div>
|
|
|
|
<div fxLayout="row" fxLayoutWrap>
|
|
|
|
<div class="icon-holder m-16" fxLayout="column" fxLayoutAlign="center center"
|
|
*ngFor="let icon of filteredIcons">
|
|
<md-icon class="s-48">{{icon}}</md-icon>
|
|
<div class="icon-name secondary-text mt-8">{{icon}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|