CODEWITHSUNDEEP
ms-officeoffice-js
SoftTimur
SoftTimur

Reputation: 5540

How to use Microsoft icons in my add-in?

I would like to use triangle icons from Microsoft fabric.min.css and fabric.components.min.css.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
  </head>
  <body class="ms-font-m">
    <div class="padding">
      <span class="ms-Icon--triangleRight"></span>
    </div>
  </body>
</html>

However, the above code (JSBin) shows this:

enter image description here

Does anyone know how to show Microsoft's icons correctly?

Upvotes: 1

Views: 472

Answers (1)

Michael Saunders
Michael Saunders

Reputation: 2668

You need to include the ms-Icon class in order to use any of the specific icons. Here's the fixed line:

<span class="ms-Icon ms-Icon--triangleRight"></span>

Upvotes: 2

Related Questions