Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="ms-Fabric">

  <h1 class="ms-font-su">Microsoft UI Fabric Icon Tests</h1>
  <h2 class="ms-font-l">Updated for 2018 - Click on a box for the basic Icon HTML.</h2>
  <!-- TODO: Search
  <div class="searchbox ">
    <div class="searchicon">
      <i class="ms-Icon ms-Icon--Search"></i>
    </div>
    <input class="search-input" placeholder="TODO:Search"></input>
  </div>
  -->

  <div id="icon-list">
    <ul id="main"></ul>
   </div>
</div>
            
          
!
            
               .ms-Grid-col {
   box-sizing: border-box;
	 background-color: grey;
	 border: 1px solid black;
	 color: white;
	 padding: 20px;
	 text-align: center;
 }
 .ms-Grid-col:hover {
	 background-color: #bada55;
	 color: black;
 }
 
 i.ms-Icon{
	 font-size: 46px;
   margin-bottom: 10px;
 }

.searchbox {
  display:flex;
  flex-direction: row;
}

.searchicon {
  padding: 8px;
}
.searchicon i {font-size: 26px;}

.search-input {
  display: block;
  flex-grow: 1;
  flex-shrink:1;
  border-style:none;
}

ul {
  display: flex;
  flex-wrap: wrap;
}
li {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}
            
          
!
            
              // JSON for all the classes:
let iconsJSON = [
    {"name": "12PointStar"},
    {"name": "6PointStar"},
    {"name": "AADLogo"},
    {"name": "Accept"},
    {"name": "AccessLogo"},
    {"name": "AccessLogoFill"},
    {"name": "AccountManagement"},
    {"name": "Accounts"},
    {"name": "ActivateOrders"},
    {"name": "ActivityFeed"},
    {"name": "Add"},
    {"name": "AddBookmark"},
    {"name": "AddEvent"},
    {"name": "AddFavorite"},
    {"name": "AddFavoriteFill"},
    {"name": "AddFriend"},
    {"name": "AddGroup"},
    {"name": "AddNotes"},
    {"name": "AddOnlineMeeting"},
    {"name": "AddPhone"},
    {"name": "AddTo"},
    {"name": "Admin"},
    {"name": "AdminALogo32"},
    {"name": "AdminALogoFill32"},
    {"name": "AdminALogoInverse32"},
    {"name": "AdminCLogoInverse32"},
    {"name": "AdminDLogoInverse32"},
    {"name": "AdminELogoInverse32"},
    {"name": "AdminLLogoInverse32"},
    {"name": "AdminMLogoInverse32"},
    {"name": "AdminOLogoInverse32"},
    {"name": "AdminPLogoInverse32"},
    {"name": "AdminSLogoInverse32"},
    {"name": "AdminYLogoInverse32"},
    {"name": "Airplane"},
    {"name": "AirplaneSolid"},
    {"name": "AirTickets"},
    {"name": "AlarmClock"},
    {"name": "Album"},
    {"name": "AlbumRemove"},
    {"name": "AlertSolid"},
    {"name": "AlignCenter"},
    {"name": "AlignHorizontalCenter"},
    {"name": "AlignHorizontalLeft"},
    {"name": "AlignHorizontalRight"},
    {"name": "AlignJustify"},
    {"name": "AlignLeft"},
    {"name": "AlignRight"},
    {"name": "AlignVerticalBottom"},
    {"name": "AlignVerticalCenter"},
    {"name": "AlignVerticalTop"},
    {"name": "AllApps"},
    {"name": "AllAppsMirrored"},
    {"name": "AnalyticsLogo"},
    {"name": "AnalyticsQuery"},
    {"name": "AnalyticsReport"},
    {"name": "AnalyticsView"},
    {"name": "AnchorLock"},
    {"name": "Annotation"},
    {"name": "AppIconDefault"},
    {"name": "Archive"},
    {"name": "AreaChart"},
    {"name": "ArrangeBringForward"},
    {"name": "ArrangeBringToFront"},
    {"name": "ArrangeByFrom"},
    {"name": "ArrangeSendBackward"},
    {"name": "ArrangeSendToBack"},
    {"name": "Arrivals"},
    {"name": "ArrowDownRight8"},
    {"name": "ArrowDownRightMirrored8"},
    {"name": "ArrowTallDownLeft"},
    {"name": "ArrowTallDownRight"},
    {"name": "ArrowTallUpLeft"},
    {"name": "ArrowTallUpRight"},
    {"name": "ArrowUpRight"},
    {"name": "ArrowUpRight8"},
    {"name": "ArrowUpRightMirrored8"},
    {"name": "Articles"},
    {"name": "Ascending"},
    {"name": "AspectRatio"},
    {"name": "AssessmentGroup"},
    {"name": "AssessmentGroupTemplate"},
    {"name": "AssetLibrary"},
    {"name": "Assign"},
    {"name": "Asterisk"},
    {"name": "AsteriskSolid"},
    {"name": "ATPLogo"},
    {"name": "Attach"},
    {"name": "AustralianRules"},
    {"name": "AutoEnhanceOff"},
    {"name": "AutoEnhanceOn"},
    {"name": "AutoFillTemplate"},
    {"name": "AutoHeight"},
    {"name": "AutoRacing"},
    {"name": "AwayStatus"},
    {"name": "AzureAPIManagement"},
    {"name": "AzureKeyVault"},
    {"name": "AzureLogo"},
    {"name": "AzureServiceEndpoint"},
    {"name": "Back"},
    {"name": "BackgroundColor"},
    {"name": "Backlog"},
    {"name": "BacklogBoard"},
    {"name": "BackToWindow"},
    {"name": "Badge"},
    {"name": "Balloons"},
    {"name": "BankSolid"},
    {"name": "BarChart4"},
    {"name": "BarChartHorizontal"},
    {"name": "BarChartVertical"},
    {"name": "Baseball"},
    {"name": "BeerMug"},
    {"name": "BIDashboard"},
    {"name": "BidiLtr"},
    {"name": "BidiRtl"},
    {"name": "BingLogo"},
    {"name": "BirthdayCake"},
    {"name": "BlockContact"},
    {"name": "Blocked"},
    {"name": "Blocked12"},
    {"name": "Blocked2"},
    {"name": "BlockedSite"},
    {"name": "BlockedSolid"},
    {"name": "BlowingSnow"},
    {"name": "Blur"},
    {"name": "Boards"},
    {"name": "Bold"},
    {"name": "BookingsLogo"},
    {"name": "Bookmarks"},
    {"name": "BookmarksMirrored"},
    {"name": "BorderDash"},
    {"name": "BorderDot"},
    {"name": "BoxAdditionSolid"},
    {"name": "BoxCheckmarkSolid"},
    {"name": "BoxMultiplySolid"},
    {"name": "BoxPlaySolid"},
    {"name": "BoxSubtractSolid"},
    {"name": "BranchCommit"},
    {"name": "BranchCompare"},
    {"name": "BranchFork"},
    {"name": "BranchFork2"},
    {"name": "BranchLocked"},
    {"name": "BranchMerge"},
    {"name": "BranchPullRequest"},
    {"name": "BranchSearch"},
    {"name": "BranchShelveset"},
    {"name": "Breadcrumb"},
    {"name": "Breakfast"},
    {"name": "Brightness"},
    {"name": "Broom"},
    {"name": "BrowserScreenShot"},
    {"name": "BrowserTab"},
    {"name": "BrowserTabScreenshot"},
    {"name": "Brunch"},
    {"name": "BucketColor"},
    {"name": "BucketColorFill"},
    {"name": "BufferTimeAfter"},
    {"name": "BufferTimeBefore"},
    {"name": "BufferTimeBoth"},
    {"name": "Bug"},
    {"name": "BugSolid"},
    {"name": "Build"},
    {"name": "BuildIssue"},
    {"name": "BuildQueue"},
    {"name": "BuildQueueNew"},
    {"name": "BulkUpload"},
    {"name": "BulletedList"},
    {"name": "BulletedList2"},
    {"name": "BulletedList2Mirrored"},
    {"name": "BulletedListMirrored"},
    {"name": "Bullseye"},
    {"name": "Bus"},
    {"name": "BusinessCenterLogo"},
    {"name": "BusinessHoursSign"},
    {"name": "BusSolid"},
    {"name": "Cafe"},
    {"name": "Cake"},
    {"name": "Calculator"},
    {"name": "CalculatorAddition"},
    {"name": "CalculatorEqualTo"},
    {"name": "CalculatorMultiply"},
    {"name": "CalculatorNotEqualTo"},
    {"name": "CalculatorSubtract"},
    {"name": "Calendar"},
    {"name": "CalendarAgenda"},
    {"name": "CalendarDay"},
    {"name": "CalendarMirrored"},
    {"name": "CalendarReply"},
    {"name": "CalendarSettings"},
    {"name": "CalendarSettingsMirrored"},
    {"name": "CalendarWeek"},
    {"name": "CalendarWorkWeek"},
    {"name": "CaloriesAdd"},
    {"name": "Camera"},
    {"name": "Cancel"},
    {"name": "CannedChat"},
    {"name": "Car"},
    {"name": "CaretBottomLeftCenter8"},
    {"name": "CaretBottomLeftSolid8"},
    {"name": "CaretBottomRightCenter8"},
    {"name": "CaretBottomRightSolid8"},
    {"name": "CaretDown8"},
    {"name": "CaretDownSolid8"},
    {"name": "CaretHollow"},
    {"name": "CaretHollowMirrored"},
    {"name": "CaretLeft8"},
    {"name": "CaretLeftSolid8"},
    {"name": "CaretRight"},
    {"name": "CaretRight8"},
    {"name": "CaretRightSolid8"},
    {"name": "CaretSolid"},
    {"name": "CaretSolid16"},
    {"name": "CaretSolidDown"},
    {"name": "CaretSolidLeft"},
    {"name": "CaretSolidMirrored"},
    {"name": "CaretSolidRight"},
    {"name": "CaretSolidUp"},
    {"name": "CaretTopLeftCenter8"},
    {"name": "CaretTopLeftSolid8"},
    {"name": "CaretTopRightCenter8"},
    {"name": "CaretTopRightSolid8"},
    {"name": "CaretUp8"},
    {"name": "CaretUpSolid8"},
    {"name": "Cat"},
    {"name": "CellPhone"},
    {"name": "Certificate"},
    {"name": "CertifiedDatabase"},
    {"name": "Chart"},
    {"name": "ChartSeries"},
    {"name": "ChartXAngle"},
    {"name": "ChartYAngle"},
    {"name": "Chat"},
    {"name": "ChatInviteFriend"},
    {"name": "ChatSolid"},
    {"name": "Checkbox"},
    {"name": "CheckboxComposite"},
    {"name": "CheckboxCompositeReversed"},
    {"name": "CheckboxIndeterminate"},
    {"name": "CheckedOutByOther12"},
    {"name": "CheckedOutByYou12"},
    {"name": "CheckList"},
    {"name": "CheckMark"},
    {"name": "ChevronDown"},
    {"name": "ChevronDownEnd6"},
    {"name": "ChevronDownMed"},
    {"name": "ChevronDownSmall"},
    {"name": "ChevronFold10"},
    {"name": "ChevronLeft"},
    {"name": "ChevronLeftEnd6"},
    {"name": "ChevronLeftMed"},
    {"name": "ChevronLeftSmall"},
    {"name": "ChevronRight"},
    {"name": "ChevronRightEnd6"},
    {"name": "ChevronRightMed"},
    {"name": "ChevronRightSmall"},
    {"name": "ChevronUnfold10"},
    {"name": "ChevronUp"},
    {"name": "ChevronUpEnd6"},
    {"name": "ChevronUpMed"},
    {"name": "ChevronUpSmall"},
    {"name": "Chopsticks"},
    {"name": "ChromeBack"},
    {"name": "ChromeBackMirrored"},
    {"name": "ChromeClose"},
    {"name": "ChromeMinimize"},
    {"name": "CircleAddition"},
    {"name": "CircleAdditionSolid"},
    {"name": "CircleFill"},
    {"name": "CircleHalfFull"},
    {"name": "CirclePause"},
    {"name": "CirclePauseSolid"},
    {"name": "CirclePlus"},
    {"name": "CircleRing"},
    {"name": "CircleShapeSolid"},
    {"name": "CircleStop"},
    {"name": "CircleStopSolid"},
    {"name": "CityNext"},
    {"name": "ClassNotebookLogo16"},
    {"name": "ClassNotebookLogo32"},
    {"name": "ClassNotebookLogoFill16"},
    {"name": "ClassNotebookLogoFill32"},
    {"name": "ClassNotebookLogoInverse"},
    {"name": "ClassNotebookLogoInverse16"},
    {"name": "ClassNotebookLogoInverse32"},
    {"name": "ClassroomLogo"},
    {"name": "Clear"},
    {"name": "ClearFilter"},
    {"name": "ClearFormatting"},
    {"name": "ClearNight"},
    {"name": "ClipboardSolid"},
    {"name": "Clock"},
    {"name": "CloneToDesktop"},
    {"name": "ClosedCaption"},
    {"name": "ClosePane"},
    {"name": "ClosePaneMirrored"},
    {"name": "Cloud"},
    {"name": "CloudAdd"},
    {"name": "CloudDownload"},
    {"name": "CloudUpload"},
    {"name": "CloudWeather"},
    {"name": "Cloudy"},
    {"name": "Cocktails"},
    {"name": "Code"},
    {"name": "CodeEdit"},
    {"name": "Coffee"},
    {"name": "CoffeeScript"},
    {"name": "CollapseContent"},
    {"name": "CollapseContentSingle"},
    {"name": "CollapseMenu"},
    {"name": "CollegeFootball"},
    {"name": "CollegeHoops"},
    {"name": "Color"},
    {"name": "ColorSolid"},
    {"name": "ColumnLeftTwoThirds"},
    {"name": "ColumnLeftTwoThirdsEdit"},
    {"name": "ColumnOptions"},
    {"name": "ColumnRightTwoThirds"},
    {"name": "ColumnRightTwoThirdsEdit"},
    {"name": "Combine"},
    {"name": "Combobox"},
    {"name": "CommandPrompt"},
    {"name": "Comment"},
    {"name": "CommentAdd"},
    {"name": "CommentNext"},
    {"name": "CommentPrevious"},
    {"name": "CommentUrgent"},
    {"name": "Commitments"},
    {"name": "Communications"},
    {"name": "CompanyDirectory"},
    {"name": "CompanyDirectoryMirrored"},
    {"name": "CompassNW"},
    {"name": "Completed"},
    {"name": "CompletedSolid"},
    {"name": "ConfigurationSolid"},
    {"name": "ConnectContacts"},
    {"name": "ConstructionCone"},
    {"name": "ConstructionConeSolid"},
    {"name": "Contact"},
    {"name": "ContactCard"},
    {"name": "ContactCardSettings"},
    {"name": "ContactCardSettingsMirrored"},
    {"name": "ContactInfo"},
    {"name": "ContactLink"},
    {"name": "ContextMenu"},
    {"name": "Contrast"},
    {"name": "Copy"},
    {"name": "Cotton"},
    {"name": "CPlusPlus"},
    {"name": "CPlusPlusLanguage"},
    {"name": "CreateMailRule"},
    {"name": "Cricket"},
    {"name": "CRMReport"},
    {"name": "Crop"},
    {"name": "Crown"},
    {"name": "CrownSolid"},
    {"name": "CSharp"},
    {"name": "CSharpLanguage"},
    {"name": "CSS"},
    {"name": "CustomList"},
    {"name": "CustomListMirrored"},
    {"name": "Cut"},
    {"name": "Cycling"},
    {"name": "DashboardAdd"},
    {"name": "Database"},
    {"name": "DataConnectionLibrary"},
    {"name": "DateTime"},
    {"name": "DateTime2"},
    {"name": "DateTimeMirrored"},
    {"name": "DeactivateOrders"},
    {"name": "DecisionSolid"},
    {"name": "DeclineCall"},
    {"name": "DecreaseIndentLegacy"},
    {"name": "DefaultRatio"},
    {"name": "DefectSolid"},
    {"name": "Delete"},
    {"name": "DeleteColumns"},
    {"name": "DeleteRows"},
    {"name": "DeleteRowsMirrored"},
    {"name": "DeleteTable"},
    {"name": "DeliveryTruck"},
    {"name": "DelveAnalytics"},
    {"name": "DelveAnalyticsLogo"},
    {"name": "DelveLogo"},
    {"name": "DelveLogoFill"},
    {"name": "DelveLogoInverse"},
    {"name": "Deploy"},
    {"name": "Descending"},
    {"name": "Design"},
    {"name": "DesktopScreenshot"},
    {"name": "DeveloperTools"},
    {"name": "Devices3"},
    {"name": "Devices4"},
    {"name": "Diagnostic"},
    {"name": "Dialpad"},
    {"name": "DiamondSolid"},
    {"name": "Dictionary"},
    {"name": "DictionaryRemove"},
    {"name": "DietPlanNotebook"},
    {"name": "DiffInline"},
    {"name": "DiffSideBySide"},
    {"name": "DisableUpdates"},
    {"name": "Dislike"},
    {"name": "DislikeSolid"},
    {"name": "DockLeft"},
    {"name": "DockLeftMirrored"},
    {"name": "DockRight"},
    {"name": "DocLibrary"},
    {"name": "DocsLogoInverse"},
    {"name": "Document"},
    {"name": "DocumentApproval"},
    {"name": "Documentation"},
    {"name": "DocumentManagement"},
    {"name": "DocumentReply"},
    {"name": "DocumentSearch"},
    {"name": "DocumentSet"},
    {"name": "DOM"},
    {"name": "DonutChart"},
    {"name": "Door"},
    {"name": "DoubleBookmark"},
    {"name": "DoubleChevronDown"},
    {"name": "DoubleChevronDown12"},
    {"name": "DoubleChevronDown8"},
    {"name": "DoubleChevronLeft"},
    {"name": "DoubleChevronLeft12"},
    {"name": "DoubleChevronLeft8"},
    {"name": "DoubleChevronLeftMed"},
    {"name": "DoubleChevronLeftMedMirrored"},
    {"name": "DoubleChevronRight"},
    {"name": "DoubleChevronRight12"},
    {"name": "DoubleChevronRight8"},
    {"name": "DoubleChevronUp"},
    {"name": "DoubleChevronUp12"},
    {"name": "DoubleChevronUp8"},
    {"name": "DoubleColumn"},
    {"name": "DoubleColumnEdit"},
    {"name": "Down"},
    {"name": "Download"},
    {"name": "DownloadDocument"},
    {"name": "DragObject"},
    {"name": "DrillDown"},
    {"name": "DrillDownSolid"},
    {"name": "DrillExpand"},
    {"name": "DrillShow"},
    {"name": "DrillThrough"},
    {"name": "DRM"},
    {"name": "Drop"},
    {"name": "Dropdown"},
    {"name": "DropShapeSolid"},
    {"name": "Duststorm"},
    {"name": "Dynamics365Logo"},
    {"name": "DynamicSMBLogo"},
    {"name": "EatDrink"},
    {"name": "EdgeLogo"},
    {"name": "Edit"},
    {"name": "EditContact"},
    {"name": "EditMail"},
    {"name": "EditMirrored"},
    {"name": "EditNote"},
    {"name": "EditPhoto"},
    {"name": "EditSolid12"},
    {"name": "EditSolidMirrored12"},
    {"name": "EditStyle"},
    {"name": "Education"},
    {"name": "Ellipse"},
    {"name": "Embed"},
    {"name": "EMI"},
    {"name": "Emoji"},
    {"name": "Emoji2"},
    {"name": "EmojiDisappointed"},
    {"name": "EmojiNeutral"},
    {"name": "EmojiTabSymbols"},
    {"name": "EmptyRecycleBin"},
    {"name": "Encryption"},
    {"name": "EngineeringGroup"},
    {"name": "EntryDecline"},
    {"name": "EntryView"},
    {"name": "Equalizer"},
    {"name": "EraseTool"},
    {"name": "Error"},
    {"name": "ErrorBadge"},
    {"name": "Event"},
    {"name": "EventAccepted"},
    {"name": "EventDate"},
    {"name": "EventDeclined"},
    {"name": "EventInfo"},
    {"name": "EventTentative"},
    {"name": "EventTentativeMirrored"},
    {"name": "ExcelDocument"},
    {"name": "ExcelLogo"},
    {"name": "ExcelLogo16"},
    {"name": "ExcelLogoFill"},
    {"name": "ExcelLogoFill16"},
    {"name": "ExcelLogoInverse"},
    {"name": "ExcelLogoInverse16"},
    {"name": "ExchangeLogo"},
    {"name": "ExchangeLogoFill"},
    {"name": "ExchangeLogoInverse"},
    {"name": "ExerciseTracker"},
    {"name": "ExpandMenu"},
    {"name": "ExploreContent"},
    {"name": "ExploreContentSingle"},
    {"name": "ExploreData"},
    {"name": "Export"},
    {"name": "ExportMirrored"},
    {"name": "ExternalBuild"},
    {"name": "ExternalGit"},
    {"name": "ExternalTFVC"},
    {"name": "ExternalXAML"},
    {"name": "F12DevTools"},
    {"name": "FabricAssetLibrary"},
    {"name": "FabricDataConnectionLibrary"},
    {"name": "FabricDocLibrary"},
    {"name": "FabricFolder"},
    {"name": "FabricFolderFill"},
    {"name": "FabricFolderSearch"},
    {"name": "FabricFormLibrary"},
    {"name": "FabricFormLibraryMirrored"},
    {"name": "FabricMovetoFolder"},
    {"name": "FabricNewFolder"},
    {"name": "FabricOpenFolderHorizontal"},
    {"name": "FabricPictureLibrary"},
    {"name": "FabricPublicFolder"},
    {"name": "FabricReportLibrary"},
    {"name": "FabricReportLibraryMirrored"},
    {"name": "FabricSyncFolder"},
    {"name": "FabricUnsyncFolder"},
    {"name": "Family"},
    {"name": "FangBody"},
    {"name": "FastForward"},
    {"name": "FastMode"},
    {"name": "Favicon"},
    {"name": "FavoriteList"},
    {"name": "FavoriteStar"},
    {"name": "FavoriteStarFill"},
    {"name": "Fax"},
    {"name": "Feedback"},
    {"name": "FeedbackRequestMirroredSolid"},
    {"name": "FeedbackRequestSolid"},
    {"name": "FeedbackResponseSolid"},
    {"name": "Ferry"},
    {"name": "FerrySolid"},
    {"name": "FieldChanged"},
    {"name": "FieldEmpty"},
    {"name": "FieldFilled"},
    {"name": "FieldNotChanged"},
    {"name": "FieldReadOnly"},
    {"name": "FieldRequired"},
    {"name": "FileASPX"},
    {"name": "FileBug"},
    {"name": "FileCode"},
    {"name": "FileComment"},
    {"name": "FileCSS"},
    {"name": "FileHTML"},
    {"name": "FileImage"},
    {"name": "FileJAVA"},
    {"name": "FileLess"},
    {"name": "FilePDB"},
    {"name": "FileSass"},
    {"name": "FileSQL"},
    {"name": "FileSymlink"},
    {"name": "FileTemplate"},
    {"name": "FileTypeSolution"},
    {"name": "FileYML"},
    {"name": "Filter"},
    {"name": "Filters"},
    {"name": "FilterSolid"},
    {"name": "FiltersSolid"},
    {"name": "Financial"},
    {"name": "FinancialMirroredSolid"},
    {"name": "FinancialSolid"},
    {"name": "Fingerprint"},
    {"name": "FiveTileGrid"},
    {"name": "Flag"},
    {"name": "FlameSolid"},
    {"name": "FlickDown"},
    {"name": "FlickLeft"},
    {"name": "FlickRight"},
    {"name": "FlickUp"},
    {"name": "Flow"},
    {"name": "FocalPoint"},
    {"name": "Fog"},
    {"name": "Folder"},
    {"name": "FolderFill"},
    {"name": "FolderHorizontal"},
    {"name": "FolderList"},
    {"name": "FolderListMirrored"},
    {"name": "FolderOpen"},
    {"name": "FolderQuery"},
    {"name": "FolderSearch"},
    {"name": "FollowUser"},
    {"name": "Font"},
    {"name": "FontColor"},
    {"name": "FontColorA"},
    {"name": "FontColorSwatch"},
    {"name": "FontDecrease"},
    {"name": "FontIncrease"},
    {"name": "FontSize"},
    {"name": "FormLibrary"},
    {"name": "FormLibraryMirrored"},
    {"name": "Forward"},
    {"name": "ForwardEvent"},
    {"name": "Freezing"},
    {"name": "Frigid"},
    {"name": "FSharp"},
    {"name": "FSharpLanguage"},
    {"name": "FullCircleMask"},
    {"name": "FullHistory"},
    {"name": "FullScreen"},
    {"name": "FullWidth"},
    {"name": "FullWidthEdit"},
    {"name": "FunctionalManagerDashboard"},
    {"name": "GallatinLogo"},
    {"name": "Generate"},
    {"name": "GenericScan"},
    {"name": "Giftbox"},
    {"name": "GiftboxOpen"},
    {"name": "GiftBoxSolid"},
    {"name": "GiftCard"},
    {"name": "GitFork"},
    {"name": "GitGraph"},
    {"name": "Glasses"},
    {"name": "Glimmer"},
    {"name": "GlobalNavButton"},
    {"name": "Globe"},
    {"name": "Globe2"},
    {"name": "GlobeFavorite"},
    {"name": "Golf"},
    {"name": "GotoToday"},
    {"name": "GridViewLarge"},
    {"name": "GridViewMedium"},
    {"name": "GridViewSmall"},
    {"name": "GripperBarHorizontal"},
    {"name": "GripperBarVertical"},
    {"name": "GripperTool"},
    {"name": "Group"},
    {"name": "GroupedAscending"},
    {"name": "GroupedDescending"},
    {"name": "GroupedList"},
    {"name": "GroupObject"},
    {"name": "GUID"},
    {"name": "Guitar"},
    {"name": "HailDay"},
    {"name": "HailNight"},
    {"name": "HalfAlpha"},
    {"name": "HalfCircle"},
    {"name": "HandsFree"},
    {"name": "Handwriting"},
    {"name": "HardDrive"},
    {"name": "HardDriveGroup"},
    {"name": "HardDriveLock"},
    {"name": "HardDriveUnlock"},
    {"name": "Header1"},
    {"name": "Header2"},
    {"name": "Header3"},
    {"name": "Header4"},
    {"name": "Headset"},
    {"name": "HeadsetSolid"},
    {"name": "Health"},
    {"name": "HealthSolid"},
    {"name": "Heart"},
    {"name": "HeartBroken"},
    {"name": "HeartFill"},
    {"name": "Help"},
    {"name": "HelpMirrored"},
    {"name": "Hexagon"},
    {"name": "Hide"},
    {"name": "Hide2"},
    {"name": "Highlight"},
    {"name": "HighlightMappedShapes"},
    {"name": "HintText"},
    {"name": "History"},
    {"name": "Home"},
    {"name": "HomeSolid"},
    {"name": "HorizontalDistributeCenter"},
    {"name": "Hospital"},
    {"name": "Hotel"},
    {"name": "HourGlass"},
    {"name": "IconSetsFlag"},
    {"name": "IDBadge"},
    {"name": "ImageCrosshair"},
    {"name": "ImageDiff"},
    {"name": "ImagePixel"},
    {"name": "ImageSearch"},
    {"name": "Import"},
    {"name": "Important"},
    {"name": "ImportMirrored"},
    {"name": "Inbox"},
    {"name": "InboxCheck"},
    {"name": "IncidentTriangle"},
    {"name": "IncreaseIndentLegacy"},
    {"name": "Info"},
    {"name": "Info2"},
    {"name": "InfoSolid"},
    {"name": "InsertColumnsLeft"},
    {"name": "InsertColumnsRight"},
    {"name": "InsertRowsAbove"},
    {"name": "InsertRowsBelow"},
    {"name": "InsertSignatureLine"},
    {"name": "InsertTextBox"},
    {"name": "InstallToDrive"},
    {"name": "InternetSharing"},
    {"name": "IRMForward"},
    {"name": "IRMForwardMirrored"},
    {"name": "IRMReply"},
    {"name": "IRMReplyMirrored"},
    {"name": "IssueSolid"},
    {"name": "IssueTracking"},
    {"name": "IssueTrackingMirrored"},
    {"name": "Italic"},
    {"name": "JavaScriptLanguage"},
    {"name": "JoinOnlineMeeting"},
    {"name": "JS"},
    {"name": "KaizalaLogo"},
    {"name": "Label"},
    {"name": "LadybugSolid"},
    {"name": "Lamp"},
    {"name": "LandscapeOrientation"},
    {"name": "LaptopSecure"},
    {"name": "LaptopSelected"},
    {"name": "LargeGrid"},
    {"name": "Leave"},
    {"name": "Library"},
    {"name": "Lifesaver"},
    {"name": "LifesaverLock"},
    {"name": "Light"},
    {"name": "Lightbulb"},
    {"name": "LightningBolt"},
    {"name": "LightWeight"},
    {"name": "Like"},
    {"name": "LikeSolid"},
    {"name": "Line"},
    {"name": "LineChart"},
    {"name": "LineSpacing"},
    {"name": "LineStyle"},
    {"name": "LineThickness"},
    {"name": "Link"},
    {"name": "LinkedInLogo"},
    {"name": "List"},
    {"name": "ListMirrored"},
    {"name": "LocaleLanguage"},
    {"name": "Location"},
    {"name": "LocationCircle"},
    {"name": "LocationDot"},
    {"name": "LocationFill"},
    {"name": "LocationOutline"},
    {"name": "Lock"},
    {"name": "LockSolid"},
    {"name": "LogRemove"},
    {"name": "LookupEntities"},
    {"name": "LowerBrightness"},
    {"name": "LyncLogo"},
    {"name": "Mail"},
    {"name": "MailAlert"},
    {"name": "MailCheck"},
    {"name": "MailFill"},
    {"name": "MailForward"},
    {"name": "MailForwardMirrored"},
    {"name": "MailLowImportance"},
    {"name": "MailPause"},
    {"name": "MailReminder"},
    {"name": "MailRepeat"},
    {"name": "MailReply"},
    {"name": "MailReplyAll"},
    {"name": "MailReplyAllMirrored"},
    {"name": "MailReplyMirrored"},
    {"name": "MailSolid"},
    {"name": "MailTentative"},
    {"name": "MailTentativeMirrored"},
    {"name": "MailUndelivered"},
    {"name": "ManagerSelfService"},
    {"name": "MapDirections"},
    {"name": "MapPin"},
    {"name": "MapPinSolid"},
    {"name": "MarkDownLanguage"},
    {"name": "Market"},
    {"name": "MarketDown"},
    {"name": "MasterDatabase"},
    {"name": "MaximumValue"},
    {"name": "Medal"},
    {"name": "MediaAdd"},
    {"name": "Medical"},
    {"name": "Megaphone"},
    {"name": "MegaphoneSolid"},
    {"name": "Memo"},
    {"name": "Merge"},
    {"name": "MergeDuplicate"},
    {"name": "Message"},
    {"name": "MessageFill"},
    {"name": "MicOff"},
    {"name": "Microphone"},
    {"name": "MicrosoftFlowLogo"},
    {"name": "MicrosoftStaffhubLogo"},
    {"name": "MiniContract"},
    {"name": "MiniExpand"},
    {"name": "MiniLink"},
    {"name": "MinimumValue"},
    {"name": "MobileReport"},
    {"name": "MobileSelected"},
    {"name": "Money"},
    {"name": "More"},
    {"name": "MoreSports"},
    {"name": "MoreVertical"},
    {"name": "Move"},
    {"name": "Movers"},
    {"name": "MoveToFolder"},
    {"name": "MSNLogo"},
    {"name": "MSNVideos"},
    {"name": "MSNVideosSolid"},
    {"name": "MTMLogo"},
    {"name": "MultiSelect"},
    {"name": "MultiSelectMirrored"},
    {"name": "MusicInCollection"},
    {"name": "MusicInCollectionFill"},
    {"name": "MusicNote"},
    {"name": "MyMoviesTV"},
    {"name": "Nav2DMapView"},
    {"name": "NavigateBack"},
    {"name": "NavigateBackMirrored"},
    {"name": "NavigateExternalInline"},
    {"name": "NavigateForward"},
    {"name": "NavigateForwardMirrored"},
    {"name": "NavigationFlipper"},
    {"name": "NetworkTower"},
    {"name": "NewAnalyticsQuery"},
    {"name": "NewFolder"},
    {"name": "News"},
    {"name": "NewsSearch"},
    {"name": "NewTeamProject"},
    {"name": "Next"},
    {"name": "NonprofitLogo32"},
    {"name": "NormalWeight"},
    {"name": "NoteForward"},
    {"name": "NotePinned"},
    {"name": "NoteReply"},
    {"name": "NotExecuted"},
    {"name": "NotImpactedSolid"},
    {"name": "NugetLogo"},
    {"name": "NumberedList"},
    {"name": "NumberField"},
    {"name": "NumberSequence"},
    {"name": "Octagon"},
    {"name": "OEM"},
    {"name": "OfficeAddinsLogo"},
    {"name": "OfficeAssistantLogo"},
    {"name": "OfficeFormsLogo"},
    {"name": "OfficeFormsLogo16"},
    {"name": "OfficeFormsLogo24"},
    {"name": "OfficeFormsLogoFill"},
    {"name": "OfficeFormsLogoFill16"},
    {"name": "OfficeFormsLogoFill24"},
    {"name": "OfficeFormsLogoInverse"},
    {"name": "OfficeFormsLogoInverse16"},
    {"name": "OfficeFormsLogoInverse24"},
    {"name": "OfficeLogo"},
    {"name": "OfficeStoreLogo"},
    {"name": "OfficeVideoLogo"},
    {"name": "OfficeVideoLogoFill"},
    {"name": "OfficeVideoLogoInverse"},
    {"name": "OfflineOneDriveParachute"},
    {"name": "OfflineOneDriveParachuteDisabled"},
    {"name": "OfflineStorageSolid"},
    {"name": "OneDrive"},
    {"name": "OneDriveAdd"},
    {"name": "OneDriveFolder16"},
    {"name": "OneNoteEduLogoInverse"},
    {"name": "OneNoteLogo"},
    {"name": "OneNoteLogo16"},
    {"name": "OneNoteLogoFill"},
    {"name": "OneNoteLogoFill16"},
    {"name": "OneNoteLogoInverse"},
    {"name": "OneNoteLogoInverse16"},
    {"name": "OpenFile"},
    {"name": "OpenFolderHorizontal"},
    {"name": "OpenInNewWindow"},
    {"name": "OpenPane"},
    {"name": "OpenPaneMirrored"},
    {"name": "OpenSource"},
    {"name": "Org"},
    {"name": "Orientation"},
    {"name": "OutlookLogo"},
    {"name": "OutlookLogo16"},
    {"name": "OutlookLogoFill"},
    {"name": "OutlookLogoFill16"},
    {"name": "OutlookLogoInverse"},
    {"name": "OutlookLogoInverse16"},
    {"name": "OutOfOffice"},
    {"name": "Package"},
    {"name": "Packages"},
    {"name": "Padding"},
    {"name": "PaddingBottom"},
    {"name": "PaddingLeft"},
    {"name": "PaddingRight"},
    {"name": "PaddingTop"},
    {"name": "Page"},
    {"name": "PageAdd"},
    {"name": "PageCheckedin"},
    {"name": "PageCheckedOut"},
    {"name": "PageEdit"},
    {"name": "PageLeft"},
    {"name": "PageListMirroredSolid"},
    {"name": "PageListSolid"},
    {"name": "PageLock"},
    {"name": "PageRemove"},
    {"name": "PageRight"},
    {"name": "PageSolid"},
    {"name": "PanoIndicator"},
    {"name": "Parachute"},
    {"name": "ParachuteSolid"},
    {"name": "Parameter"},
    {"name": "ParkingLocation"},
    {"name": "ParkingLocationMirrored"},
    {"name": "ParkingMirroredSolid"},
    {"name": "ParkingSolid"},
    {"name": "PartlyCloudyDay"},
    {"name": "PartlyCloudyNight"},
    {"name": "PartyLeader"},
    {"name": "Paste"},
    {"name": "PasteAsCode"},
    {"name": "PasteAsText"},
    {"name": "Pause"},
    {"name": "PaymentCard"},
    {"name": "PC1"},
    {"name": "PDF"},
    {"name": "PencilReply"},
    {"name": "Pentagon"},
    {"name": "People"},
    {"name": "PeopleAdd"},
    {"name": "PeopleAlert"},
    {"name": "PeopleBlock"},
    {"name": "PeoplePause"},
    {"name": "PeopleRepeat"},
    {"name": "Permissions"},
    {"name": "PermissionsSolid"},
    {"name": "Personalize"},
    {"name": "Phishing"},
    {"name": "Phone"},
    {"name": "Photo2"},
    {"name": "Photo2Add"},
    {"name": "Photo2Remove"},
    {"name": "PhotoCollection"},
    {"name": "Picture"},
    {"name": "PictureCenter"},
    {"name": "PictureFill"},
    {"name": "PictureLibrary"},
    {"name": "PicturePosition"},
    {"name": "PictureStretch"},
    {"name": "PictureTile"},
    {"name": "PieDouble"},
    {"name": "PieSingle"},
    {"name": "PieSingleSolid"},
    {"name": "Pill"},
    {"name": "Pin"},
    {"name": "Pinned"},
    {"name": "PinnedFill"},
    {"name": "PivotChart"},
    {"name": "PlannerLogo"},
    {"name": "PlanView"},
    {"name": "Play"},
    {"name": "PlayerSettings"},
    {"name": "PlayResume"},
    {"name": "Plug"},
    {"name": "PlugConnected"},
    {"name": "PlugDisconnected"},
    {"name": "PlugSolid"},
    {"name": "POI"},
    {"name": "POISolid"},
    {"name": "PostUpdate"},
    {"name": "PowerApps"},
    {"name": "PowerApps2Logo"},
    {"name": "PowerAppsLogo"},
    {"name": "PowerBILogo"},
    {"name": "PowerButton"},
    {"name": "PowerPointDocument"},
    {"name": "PowerPointLogo"},
    {"name": "PowerPointLogo16"},
    {"name": "PowerPointLogoFill"},
    {"name": "PowerPointLogoFill16"},
    {"name": "PowerPointLogoInverse"},
    {"name": "PowerPointLogoInverse16"},
    {"name": "Precipitation"},
    {"name": "PresenceChickletVideo"},
    {"name": "Preview"},
    {"name": "PreviewLink"},
    {"name": "Previous"},
    {"name": "PrimaryCalendar"},
    {"name": "Print"},
    {"name": "PrintfaxPrinterFile"},
    {"name": "Processing"},
    {"name": "ProcessMetaTask"},
    {"name": "Product"},
    {"name": "ProfileSearch"},
    {"name": "ProFootball"},
    {"name": "ProgressLoopInner"},
    {"name": "ProgressLoopOuter"},
    {"name": "ProgressRingDots"},
    {"name": "ProHockey"},
    {"name": "ProjectCollection"},
    {"name": "ProjectLogo16"},
    {"name": "ProjectLogo32"},
    {"name": "ProjectLogoFill16"},
    {"name": "ProjectLogoFill32"},
    {"name": "ProjectLogoInverse"},
    {"name": "ProtectedDocument"},
    {"name": "ProtectionCenterLogo32"},
    {"name": "ProtectRestrict"},
    {"name": "PublicCalendar"},
    {"name": "PublicContactCard"},
    {"name": "PublicContactCardMirrored"},
    {"name": "PublicEmail"},
    {"name": "PublicFolder"},
    {"name": "PublishCourse"},
    {"name": "PublisherLogo"},
    {"name": "PublisherLogo16"},
    {"name": "PublisherLogoFill"},
    {"name": "PublisherLogoFill16"},
    {"name": "PublisherLogoInverse16"},
    {"name": "Puzzle"},
    {"name": "PY"},
    {"name": "PythonLanguage"},
    {"name": "QuarterCircle"},
    {"name": "QueryList"},
    {"name": "Questionnaire"},
    {"name": "QuestionnaireMirrored"},
    {"name": "QuickNote"},
    {"name": "QuickNoteSolid"},
    {"name": "R"},
    {"name": "RadioBtnOff"},
    {"name": "RadioBtnOn"},
    {"name": "RadioBullet"},
    {"name": "Rain"},
    {"name": "RainShowersDay"},
    {"name": "RainShowersNight"},
    {"name": "RainSnow"},
    {"name": "RawSource"},
    {"name": "Read"},
    {"name": "ReadingMode"},
    {"name": "ReadingModeSolid"},
    {"name": "ReadOutLoud"},
    {"name": "ReceiptCheck"},
    {"name": "ReceiptForward"},
    {"name": "ReceiptReply"},
    {"name": "ReceiptTentative"},
    {"name": "ReceiptTentativeMirrored"},
    {"name": "ReceiptUndelivered"},
    {"name": "Recent"},
    {"name": "Record2"},
    {"name": "RectangleShapeSolid"},
    {"name": "RectangularClipping"},
    {"name": "RecurringEvent"},
    {"name": "RecurringTask"},
    {"name": "RecycleBin"},
    {"name": "Redeploy"},
    {"name": "RedEye"},
    {"name": "Redo"},
    {"name": "Refresh"},
    {"name": "ReminderGroup"},
    {"name": "ReminderPerson"},
    {"name": "Remote"},
    {"name": "Remove"},
    {"name": "RemoveEvent"},
    {"name": "RemoveFilter"},
    {"name": "RemoveLink"},
    {"name": "RemoveOccurrence"},
    {"name": "Rename"},
    {"name": "RenewalCurrent"},
    {"name": "RenewalFuture"},
    {"name": "ReopenPages"},
    {"name": "Repair"},
    {"name": "Reply"},
    {"name": "ReplyAll"},
    {"name": "ReplyAllAlt"},
    {"name": "ReplyAllMirrored"},
    {"name": "ReplyAlt"},
    {"name": "ReplyMirrored"},
    {"name": "Repo"},
    {"name": "ReportAdd"},
    {"name": "ReportHacked"},
    {"name": "ReportLibrary"},
    {"name": "ReportLibraryMirrored"},
    {"name": "RepoSolid"},
    {"name": "ReturnToSession"},
    {"name": "ReviewRequestMirroredSolid"},
    {"name": "ReviewRequestSolid"},
    {"name": "ReviewResponseSolid"},
    {"name": "ReviewSolid"},
    {"name": "RevToggleKey"},
    {"name": "Rewind"},
    {"name": "Ribbon"},
    {"name": "RibbonSolid"},
    {"name": "RightDoubleQuote"},
    {"name": "RightTriangle"},
    {"name": "Ringer"},
    {"name": "RingerOff"},
    {"name": "RingerRemove"},
    {"name": "Robot"},
    {"name": "Rocket"},
    {"name": "Room"},
    {"name": "Rotate"},
    {"name": "RowsChild"},
    {"name": "RowsGroup"},
    {"name": "Rugby"},
    {"name": "Running"},
    {"name": "Sad"},
    {"name": "SadSolid"},
    {"name": "Save"},
    {"name": "SaveAll"},
    {"name": "SaveAndClose"},
    {"name": "SaveAs"},
    {"name": "Savings"},
    {"name": "ScaleUp"},
    {"name": "ScheduleEventAction"},
    {"name": "ScopeTemplate"},
    {"name": "Script"},
    {"name": "ScrollUpDown"},
    {"name": "Search"},
    {"name": "SearchAndApps"},
    {"name": "SearchBookmark"},
    {"name": "SearchCalendar"},
    {"name": "SearchIssue"},
    {"name": "SearchIssueMirrored"},
    {"name": "Section"},
    {"name": "Sections"},
    {"name": "SecurityGroup"},
    {"name": "SelectAll"},
    {"name": "Sell"},
    {"name": "SemiboldWeight"},
    {"name": "Send"},
    {"name": "SendMirrored"},
    {"name": "Separator"},
    {"name": "Server"},
    {"name": "ServerEnviroment"},
    {"name": "ServerProcesses"},
    {"name": "SetAction"},
    {"name": "Settings"},
    {"name": "Share"},
    {"name": "ShareiOS"},
    {"name": "SharepointLogo"},
    {"name": "SharepointLogoFill"},
    {"name": "SharepointLogoInverse"},
    {"name": "Shield"},
    {"name": "ShieldSolid"},
    {"name": "Shop"},
    {"name": "ShoppingCart"},
    {"name": "ShoppingCartSolid"},
    {"name": "ShopServer"},
    {"name": "ShowResults"},
    {"name": "ShowResultsMirrored"},
    {"name": "SidePanel"},
    {"name": "SidePanelMirrored"},
    {"name": "SignOut"},
    {"name": "SingleBookmark"},
    {"name": "SingleBookmarkSolid"},
    {"name": "SingleColumn"},
    {"name": "SingleColumnEdit"},
    {"name": "SIPMove"},
    {"name": "SiteScan"},
    {"name": "SizeLegacy"},
    {"name": "SkiResorts"},
    {"name": "SkypeCheck"},
    {"name": "SkypeCircleCheck"},
    {"name": "SkypeCircleClock"},
    {"name": "SkypeCircleMinus"},
    {"name": "SkypeClock"},
    {"name": "SkypeForBusinessLogo"},
    {"name": "SkypeForBusinessLogo16"},
    {"name": "SkypeForBusinessLogoFill"},
    {"name": "SkypeForBusinessLogoFill16"},
    {"name": "SkypeLogo"},
    {"name": "SkypeLogo16"},
    {"name": "SkypeMessage"},
    {"name": "SkypeMinus"},
    {"name": "Slider"},
    {"name": "SliderHandleSize"},
    {"name": "SliderThumb"},
    {"name": "Snooze"},
    {"name": "Snow"},
    {"name": "Snowflake"},
    {"name": "SnowShowerDay"},
    {"name": "SnowShowerNight"},
    {"name": "Soccer"},
    {"name": "SocialListeningLogo"},
    {"name": "Sort"},
    {"name": "SortDown"},
    {"name": "SortLines"},
    {"name": "SortUp"},
    {"name": "Source"},
    {"name": "Spacer"},
    {"name": "Speakers"},
    {"name": "SpeedHigh"},
    {"name": "Split"},
    {"name": "SplitObject"},
    {"name": "Sprint"},
    {"name": "Squalls"},
    {"name": "SquareShapeSolid"},
    {"name": "Stack"},
    {"name": "StackedBarChart"},
    {"name": "StackedLineChart"},
    {"name": "StackIndicator"},
    {"name": "StaffNotebookLogo16"},
    {"name": "StaffNotebookLogo32"},
    {"name": "StaffNotebookLogoFill16"},
    {"name": "StaffNotebookLogoFill32"},
    {"name": "StaffNotebookLogoInverted16"},
    {"name": "StaffNotebookLogoInverted32"},
    {"name": "Starburst"},
    {"name": "StarburstSolid"},
    {"name": "StatusCircleBlock2"},
    {"name": "StatusCircleCheckmark"},
    {"name": "StatusCircleErrorX"},
    {"name": "StatusCircleExclamation"},
    {"name": "StatusCircleInfo"},
    {"name": "StatusCircleInner"},
    {"name": "StatusCircleOuter"},
    {"name": "StatusCircleQuestionMark"},
    {"name": "StatusCircleRing"},
    {"name": "StatusErrorFull"},
    {"name": "StatusTriangle"},
    {"name": "StatusTriangleExclamation"},
    {"name": "StatusTriangleInner"},
    {"name": "StatusTriangleOuter"},
    {"name": "Step"},
    {"name": "StepInsert"},
    {"name": "StepShared"},
    {"name": "StepSharedAdd"},
    {"name": "StepSharedInsert"},
    {"name": "StockDown"},
    {"name": "StockUp"},
    {"name": "Stop"},
    {"name": "StopSolid"},
    {"name": "Stopwatch"},
    {"name": "StoreLogo16"},
    {"name": "StoreLogoMed20"},
    {"name": "Storyboard"},
    {"name": "Streaming"},
    {"name": "StreamingOff"},
    {"name": "StreamLogo"},
    {"name": "Strikethrough"},
    {"name": "Subscribe"},
    {"name": "Subscript"},
    {"name": "SubstitutionsIn"},
    {"name": "Suitcase"},
    {"name": "SunAdd"},
    {"name": "Sunny"},
    {"name": "SunQuestionMark"},
    {"name": "Superscript"},
    {"name": "SurveyQuestions"},
    {"name": "SwayLogo16"},
    {"name": "SwayLogo32"},
    {"name": "SwayLogoFill16"},
    {"name": "SwayLogoFill32"},
    {"name": "SwayLogoInverse"},
    {"name": "Switch"},
    {"name": "SwitcherStartEnd"},
    {"name": "Sync"},
    {"name": "SyncFolder"},
    {"name": "SyncOccurence"},
    {"name": "SyncToPC"},
    {"name": "System"},
    {"name": "Tab"},
    {"name": "Table"},
    {"name": "Tablet"},
    {"name": "TabletMode"},
    {"name": "TabletSelected"},
    {"name": "Tag"},
    {"name": "Taskboard"},
    {"name": "TaskGroup"},
    {"name": "TaskGroupMirrored"},
    {"name": "TaskLogo"},
    {"name": "TaskManager"},
    {"name": "TaskManagerMirrored"},
    {"name": "TaskSolid"},
    {"name": "Taxi"},
    {"name": "TeamFavorite"},
    {"name": "TeamsLogo"},
    {"name": "TeamsLogoFill"},
    {"name": "TeamsLogoInverse"},
    {"name": "Teamwork"},
    {"name": "Teeth"},
    {"name": "TemporaryUser"},
    {"name": "Tennis"},
    {"name": "TestAutoSolid"},
    {"name": "TestBeaker"},
    {"name": "TestBeakerSolid"},
    {"name": "TestCase"},
    {"name": "TestExploreSolid"},
    {"name": "TestImpactSolid"},
    {"name": "TestParameter"},
    {"name": "TestPlan"},
    {"name": "TestStep"},
    {"name": "TestSuite"},
    {"name": "TestUserSolid"},
    {"name": "TextBox"},
    {"name": "TextCallout"},
    {"name": "TextDocument"},
    {"name": "TextDocumentShared"},
    {"name": "TextField"},
    {"name": "TextOverflow"},
    {"name": "TFVCLogo"},
    {"name": "ThisPC"},
    {"name": "ThreeQuarterCircle"},
    {"name": "ThumbnailView"},
    {"name": "ThumbnailViewMirrored"},
    {"name": "Thunderstorms"},
    {"name": "Ticket"},
    {"name": "Tiles"},
    {"name": "Tiles2"},
    {"name": "TimeEntry"},
    {"name": "Timeline"},
    {"name": "TimelineDelivery"},
    {"name": "TimelineMatrixView"},
    {"name": "TimelineProgress"},
    {"name": "Timer"},
    {"name": "TimeSheet"},
    {"name": "ToDoLogoBottom"},
    {"name": "ToDoLogoInverse"},
    {"name": "ToDoLogoTop"},
    {"name": "ToggleBorder"},
    {"name": "ToggleFilled"},
    {"name": "ToggleOff"},
    {"name": "ToggleThumb"},
    {"name": "Toll"},
    {"name": "Touch"},
    {"name": "TouchPointer"},
    {"name": "Trackers"},
    {"name": "TrackersMirrored"},
    {"name": "Train"},
    {"name": "TrainSolid"},
    {"name": "TransferCall"},
    {"name": "Transition"},
    {"name": "TransitionEffect"},
    {"name": "TransitionPop"},
    {"name": "TransitionPush"},
    {"name": "Trending12"},
    {"name": "TriangleDown12"},
    {"name": "TriangleLeft12"},
    {"name": "TriangleRight12"},
    {"name": "TriangleShapeSolid"},
    {"name": "TriangleSolid"},
    {"name": "TriangleSolidDown12"},
    {"name": "TriangleSolidLeft12"},
    {"name": "TriangleSolidRight12"},
    {"name": "TriangleSolidUp12"},
    {"name": "TriangleUp12"},
    {"name": "TriggerApproval"},
    {"name": "TriggerAuto"},
    {"name": "TriggerUser"},
    {"name": "TripleColumn"},
    {"name": "TripleColumnEdit"},
    {"name": "Trophy"},
    {"name": "Trophy2"},
    {"name": "Trophy2Solid"},
    {"name": "TurnRight"},
    {"name": "TVMonitor"},
    {"name": "TVMonitorSelected"},
    {"name": "TypeScriptLanguage"},
    {"name": "Umbrella"},
    {"name": "Underline"},
    {"name": "Undo"},
    {"name": "Uneditable"},
    {"name": "UneditableMirrored"},
    {"name": "UneditableSolid12"},
    {"name": "UneditableSolidMirrored12"},
    {"name": "Unfavorite"},
    {"name": "UngroupObject"},
    {"name": "Unknown"},
    {"name": "UnknownCall"},
    {"name": "UnknownMirrored"},
    {"name": "UnknownMirroredSolid"},
    {"name": "UnknownSolid"},
    {"name": "Unlock"},
    {"name": "UnlockSolid"},
    {"name": "Unpin"},
    {"name": "Unsubscribe"},
    {"name": "UnsyncFolder"},
    {"name": "UnsyncOccurence"},
    {"name": "Up"},
    {"name": "Upload"},
    {"name": "UserEvent"},
    {"name": "UserFollowed"},
    {"name": "UserPause"},
    {"name": "UserRemove"},
    {"name": "UserSync"},
    {"name": "Vacation"},
    {"name": "Variable"},
    {"name": "VariableGroup"},
    {"name": "VB"},
    {"name": "VennDiagram"},
    {"name": "VersionControlPush"},
    {"name": "VerticalDistributeCenter"},
    {"name": "Video"},
    {"name": "VideoOff"},
    {"name": "VideoSearch"},
    {"name": "VideoSolid"},
    {"name": "View"},
    {"name": "ViewAll"},
    {"name": "ViewAll2"},
    {"name": "ViewDashboard"},
    {"name": "ViewList"},
    {"name": "ViewListGroup"},
    {"name": "ViewListTree"},
    {"name": "VisioDiagram"},
    {"name": "VisioDocument"},
    {"name": "VisioLogo"},
    {"name": "VisioLogo16"},
    {"name": "VisioLogoFill"},
    {"name": "VisioLogoFill16"},
    {"name": "VisioLogoInverse"},
    {"name": "VisioLogoInverse16"},
    {"name": "VisualBasicLanguage"},
    {"name": "VisualsFolder"},
    {"name": "VisualsStore"},
    {"name": "VisualStudioIDELogo32"},
    {"name": "VisualStudioLogo"},
    {"name": "VoicemailForward"},
    {"name": "VoicemailIRM"},
    {"name": "VoicemailReply"},
    {"name": "Volume0"},
    {"name": "Volume1"},
    {"name": "Volume2"},
    {"name": "Volume3"},
    {"name": "VolumeDisabled"},
    {"name": "VSTSAltLogo1"},
    {"name": "VSTSAltLogo2"},
    {"name": "VSTSLogo"},
    {"name": "Waffle"},
    {"name": "WaffleOffice365"},
    {"name": "WaitlistConfirm"},
    {"name": "WaitlistConfirmMirrored"},
    {"name": "Warning"},
    {"name": "Warning12"},
    {"name": "WebPublish"},
    {"name": "Website"},
    {"name": "Weights"},
    {"name": "WhiteBoardApp16"},
    {"name": "WhiteBoardApp32"},
    {"name": "WifiEthernet"},
    {"name": "WindDirection"},
    {"name": "WindowEdit"},
    {"name": "WindowsLogo"},
    {"name": "Wines"},
    {"name": "WipePhone"},
    {"name": "WordDocument"},
    {"name": "WordLogo"},
    {"name": "WordLogo16"},
    {"name": "WordLogoFill"},
    {"name": "WordLogoFill16"},
    {"name": "WordLogoInverse"},
    {"name": "WordLogoInverse16"},
    {"name": "Work"},
    {"name": "WorkFlow"},
    {"name": "WorkforceManagement"},
    {"name": "WorkItem"},
    {"name": "WorkItemBar"},
    {"name": "WorkItemBarSolid"},
    {"name": "WorkItemBug"},
    {"name": "World"},
    {"name": "WorldClock"},
    {"name": "YammerLogo"},
    {"name": "ZipFolder"},
    {"name": "Zoom"},
    {"name": "ZoomIn"},
    {"name": "ZoomOut"}
];

let row = document.getElementById('main');

function renderIconsList(iconsJSON){
  iconsJSON.forEach( (icon) => { 
    let box = `
      <li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
        <i class="ms-Icon ms-Icon--${icon.name}" aria-hidden="true"></i>
        <span class="ms-font-m">${icon.name}</span>
      </li>
    `;
    //https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
    row.insertAdjacentHTML('beforeend', box);
  });
}

function addIconClickEvents(){
  let els = document.querySelectorAll("i.ms-Icon");
  for (let i = 0; i < els.length; i++) {
    var el = els[i];
    console.log(el.className[1])
    let msg = `<i class="${el.className}" aria-hidden="true"></i>`
    el.addEventListener("click", function() {
      alert(msg);
    });
  }
}


let filteredIconsJSON = iconsJSON; // TODO: filter - see below.
renderIconsList(filteredIconsJSON);
addIconClickEvents();
/* TODOs: assign all items click handlers to do things - like:

  -refactor into functions in prep for the below:
  -a dialog with a copy link for a handy snippet DONE
  -a filter searchbox.
  -other cool things, like examples maybe?
*/

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console