Google Font Icons

The `GoogleFontIcon` component will display Google Material Symbols.

Example #

Example
View Source

search

<GoogleFontIcon Name="GoogleFontIconName.Search" />

Icon text #

You can show the icon with text by wrapping the text in a GoogleFontIcon component. In the example below, the icon is shown with text on the right.

Example
View Source

search Search

<GoogleFontIcon Name="GoogleFontIconName.Search">
    Search
</GoogleFontIcon>

Colors #

Use Color parameter to set the color of the icon. In the example below, the icon is shown with different colors.

Example
View Source

search search search search search search

<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" />
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Link" />
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Info" />
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Success" />
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Warning" />
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Danger" />

When icon with text is used, aldong with Color parameter, set ApplyColorToText to true to apply the color to the text as well.

Example
View Source

search Primary search Link search Info search Success search Warning search Danger

<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" ApplyColorToText="true">Primary</GoogleFontIcon>
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Link" ApplyColorToText="true">Link</GoogleFontIcon>
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Info" ApplyColorToText="true">Info</GoogleFontIcon>
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Success" ApplyColorToText="true">Success</GoogleFontIcon>
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Warning" ApplyColorToText="true">Warning</GoogleFontIcon>
<GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Danger" ApplyColorToText="true">Danger</GoogleFontIcon>

Sizes #

Use Size parameter to set the size of the icon. In the example below, the icon is shown with different sizes.

Example
View Source

Size	Icon
`GoogleFontIconSize.None`	search
`GoogleFontIconSize.XSmall`	search
`GoogleFontIconSize.Small`	search
`GoogleFontIconSize.Medium`	search
`GoogleFontIconSize.Large`	search
`GoogleFontIconSize.XLarge`	search
`GoogleFontIconSize.XXLarge`	search

<table class="table is-bordered">
    <thead>
        <tr>
            <th>Size</th>
            <th>Icon</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>GoogleFontIconSize.None</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.None" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.XSmall</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XSmall" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.Small</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Small" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.Medium</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Medium" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.Large</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Large" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.XLarge</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XLarge" /></td>
        </tr>
        <tr>
            <td><code>GoogleFontIconSize.XXLarge</code></td>
            <td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XXLarge" /></td>
        </tr>
    </tbody>
</table>

All icons #

In the example below, all icons are shown with their names.

Example
View Source

3d_rotation

Rotation3D

accessibility

Accessibility

accessibility_new

AccessibilityNew

accessible

Accessible

accessible_forward

AccessibleForward

account_box

AccountBox

account_circle

AccountCircle

account_circle_off

AccountCircleOff

ad_group

AdGroup

ad_group_off

AdGroupOff

ad_off

AdOff

add_alert

AddAlert

ads_click

AdsClick

alarm

Alarm

alarm_add

AlarmAdd

alarm_off

AlarmOff

alarm_on

AlarmOn

all_inclusive

AllInclusive

all_out

AllOut

anchor

Anchor

api

Api

app_shortcut

AppShortcut

approval

Approval

auto_delete

AutoDelete

award_star

AwardStar

background_replace

BackgroundReplace

backup

Backup

backup_table

BackupTable

batch_prediction

BatchPrediction

bookmark_add

BookmarkAdd

bookmark_added

BookmarkAdded

bookmark_bag

BookmarkBag

bookmark_check

BookmarkCheck

bookmark_flag

BookmarkFlag

bookmark_heart

BookmarkHeart

bookmark_star

BookmarkStar

bookmarks

Bookmarks

browse

Browse

bug_report

BugReport

build

Build

build_circle

BuildCircle

calendar_today

CalendarToday

category

Category

celebration

Celebration

change_history

ChangeHistory

chrome_reader_mode

ChromeReaderMode

circle_notifications

CircleNotifications

code

Code

code_blocks

CodeBlocks

code_off

CodeOff

collections_bookmark

CollectionsBookmark

commit

Commit

component_exchange

ComponentExchange

data_loss_prevention

DataLossPrevention

date_range

DateRange

delete_history

DeleteHistory

developer_guide

DeveloperGuide

domain_verification

DomainVerification

domain_verification_off

DomainVerificationOff

edit_calendar

EditCalendar

edit_notifications

EditNotifications

edit_square

EditSquare

error

Error

event

Event

event_available

EventAvailable

event_repeat

EventRepeat

event_upcoming

EventUpcoming

extension

Extension

feature_search

FeatureSearch

feedback

Feedback

find_replace

FindReplace

flutter

Flutter

flutter_dash

FlutterDash

free_cancellation

FreeCancellation

gesture

Gesture

gesture_select

GestureSelect

hand_gesture

HandGesture

help_center

HelpCenter

help_clinic

HelpClinic

history

History

history_2

History2

history_off

HistoryOff

history_toggle_off

HistoryToggleOff

hourglass

Hourglass

hourglass_disabled

HourglassDisabled

hourglass_empty

HourglassEmpty

hourglass_pause

HourglassPause

home

Home

computer

Computer

thumb_up

ThumbUp