如何在 Angular Material 中使用自定義圖標

如果您希望在 Angular Material 中使用自定義圖標，則需要執行幾個步驟。 首先，您需要創建自己的圖標集。 Angular Material 帶有一組內置圖標，但您也可以創建自己的圖標。 獲得圖標後，您需要使用 Angular Material 註冊它們。 這可以在您應用的模塊文件中完成。 註冊圖標後，您可以像使用內置圖標一樣使用它們。 您可以在標記中使用它們，也可以通過編程方式訪問它們。 這就是在 Angular Material 中使用自定義圖標的全部內容！ 通過執行這些步驟，您可以輕鬆地將自己的圖標添加到 Angular Material 以在您的應用程序中使用。

在本教程中，我們將使用 >mat-icon> 組件來創建 Material Icons 字體。 除了支持自定義 sva 圖標外，還將使用該組件。 在 GitHub 上，您可以找到完整的工作代碼。 這篇文章是為那些只學習 Angular v4.2+ 的人準備的。 本教程的 Angular 材質最初是用 Angular 5.2 和 Angular 10.1 編寫的。 我們將在本教程中使用的圖標（類似於一張笑臉）是心情圖標。 除了完整的 Material 圖標列表外，Material Design 網站還提供了多種可單獨使用的圖標樣式。

我們現在可以使用鼠標圖標來顯示 SVG。 通過在 .html 文件的輸入屬性中輸入標籤，您可以使用圖標標籤來指定訪問哪個圖標。 URL 應該是 https://app.html。 讓我們看一下當前可用的內容。 當您在瀏覽器中查看應用程序時，您會注意到自定義圖標採用 Material 樣式。 將 MatIconRegistry 移動到服務類中將有助於它維護和清潔代碼。

我如何在 Angular 12 中使用 Svg 圖標？

為了在 Angular 12 中使用SVG 圖標，您需要安裝 @angular/material 和 @angular/material-extensions 包。 然後，您可以使用 matIconRegistry 服務來註冊圖標並將它們添加到您的組件中。

您可以使用Icon.svg 文件作為您的獨立文件來管理 Angular2 中的代碼。 此外，可以使用 ng-inline-svg 模塊（或者，如果可能，其他類似的方法）來執行此操作。 因此，它本質上是介於兩者之間的東西——每種類型的圖像都有單獨的文件，當頁面加載時圖像是內聯的，因此您可以使用 JS/CSS 來操作它們。

使用 aria-describedby 作為 SVG 的一部分將使殘障用戶在使用您的網站時獲得更好的體驗。 因此，當您使用 aria-described by 描述您的圖標時，您將能夠確保殘障用戶能夠理解它們所代表的內容。

Png VS 的辯論。 Svg 圖標

另一方面，也可以將 alpha 通道添加到 SVG 文件中。 換句話說，因為它們可以包含在透明區域中同時保留一點顏色，所以 SVG 圖標比PNG 圖標更通用。 選擇將哪個文件用於圖標取決於您的特定項目及其需求。

如何在 Html 中使用自定義 Svg 圖標？

要在 HTML 中使用自定義 SVG 圖標，您需要在圖標元素的 href 屬性中包含圖標的文件路徑。 文件路徑應相對於頁面的根目錄。 例如，如果圖標位於根目錄中名為“icons”的文件夾中，則文件路徑將為“icons/icon.svg”。

自從引入在線工具（如 Icomoon 和 Fontello）以來，創建網絡字體變得更加容易。 使用 HTML5，我們可以訪問範圍更廣的圖標，這要歸功於可縮放矢量圖形。 如果您想為 Explorer 8 提供技術支持，有幾個簡單的回退選項。 片段的標識符是內置的 SVG 屬性。 如果我們想使用 SVG 視圖規範或尋址數組，我們可以引用片段。 該元素是基於其 >view> ID 的SVG 元素。 要僅顯示此棋子精靈（來自維基百科共享資源）中的黑馬，您必須像在下面的方案中那樣檢測值。

使用 img 標籤定義圖像，該技術適用於 Firefox、Chrome、Safari（桌面）和 Opera。 或者，您可以使用外部 SVG 文件來創建 CSS 精靈，如下圖所示。 這是一種可靠的、隨時可用的製造技術。 我在各種主要瀏覽器（包括 IE8）中對其進行了測試，並且運行良好。 圖標作為標籤出現在屏幕上。 同樣，Icomoon 可用於手動創建符號標籤集合，或者您可以使用某些 Grunt 插件（谷歌用於 Grunt SVG 合併）來執行此操作。 除IE9外，此方法適用於所有主流瀏覽器。 甚至 Jonathan Neal 的解決方案 SVG4everybody 也可以用來解決這個問題。

除非源代碼指定了所需的寬度屬性，否則 sva 圖像不會在 Chrome 瀏覽器中顯示。 如果 SVG 沒有這個屬性，瀏覽器會將圖像放大或縮小。

如何在網頁上使用 Svg 圖像

您可以使用 svg> /svg> 標籤將 SVG 圖像直接插入到 HTML 中。 可以在 VS 代碼或您喜歡的 IDE 中訪問 SVG 圖像，方法是複制代碼並將其粘貼到 HTML 文檔的 body 元素中。 如果一切順利，您的網頁將與此處顯示的完全一樣。
只需在網絡瀏覽器中輸入名稱，即可使用 SVG 圖像創建圖標。 HTML 可以嵌入其中，並且可以安裝它們的緩存版本。 證據也對未來充滿希望。 應使用 PNG 或可縮放圖形界面 (SVG) 創建圖標。

Angular Material Svg 圖標列表

Angular Material 庫基於 Google 的 Material Design 規範提供了一組可重用、經過良好測試且可訪問的 UI 組件。 該庫的功能之一是能夠將 SVG 圖標用作 Material 圖標。 Angular Material 圖標集包括各種各樣的圖標，包括社交媒體圖標、文件類型圖標和箭頭。 您可以在 Material icons 站點上瀏覽 Angular Material 圖標的完整列表。

可以使用 Angular Material 的 Mat -Icon 組件顯示圖標。 該組件的主要功能是能夠使用 Font-awesome 等網絡字體顯示圖像，它只需要您需要的圖像名稱即可。 不屬於網絡字體的圖標會怎樣？ 在圖標中，您是否希望在運行時進行更改（例如，懸停時的顏色或特定位置按鈕的狀態）？ 打開瀏覽器控制台部分後出現以下錯誤。 使用資源 URL 上下文時，使用值 unsafe。 將URL定義為參數用於繞過SecurityTrustResourceUrl，這樣可以防止攻擊者註入惡意URL，例如這個，參見DomSanitizer官方文檔。

稍後我們會看到更好的方法，但現在，我們只是將它們放在 app.html 頁面上。 如上所述，在 mat -icon HTML 標記中添加一個類。 當用戶將鼠標懸停在圖標上時，圖像的顏色會因 SCSS 而發生變化。 將鼠標懸停在圖標上時，圖標現在應該會改變顏色。 作為未來帖子的一部分，我們將研究改進這一點並重構以允許使用服務加載圖標。

如何使用 Angular Material 圖標

我在哪裡可以找到角度材料圖標？
您唯一需要做的就是在您的 HTML 代碼中使用以下 Google 網絡字體 CSS。 材料圖標可以在單個文件 (42KB) 中找到，大小範圍從大到小。 圖標分為十個不同的類別，您可以在 Git 存儲庫中看到它們。 這些圖標也可以託管在您自己的服務器上。
有哪些查看材料圖標的好網站？
我們已將 Material 圖標編譯到 Git 存儲庫中，其中包括我們提供的所有格式。
自定義圖標的最佳方式是什麼？
必須將 class 元素添加到 mat-icon HTML 標記中，如上所示。 將 SCSS 添加到類中會在用戶將鼠標懸停在圖標上時更改圖標的顏色。 將鼠標懸停在圖標上時，它們現在應該會改變顏色。

如何使用 Angular Material 圖標

Angular Material 圖標是可以在 Angular 應用程序中使用的 SVG。 要使用圖標，只需將圖標類添加到元素即可。 例如，要使用 account-circle 圖標，您可以將類 mat-icon-account-circle 添加到元素中。

我們有角度的材料庫，可用於快速設計我們的應用程序並為其分配構建標籤。 素材庫中包含一個 mat-icon，這是向我們顯示圖標所必需的。 在接下來的部分中，我們將學習如何安裝所需的庫以及如何實現它以在我們的應用程序中顯示圖標。 我們的第一個服務是 MatIconRegistry，它是一個註冊表，允許我們使用可注入的服務來識別和定義圖標的別名。 該圖標使用起來非常簡單，但它需要將此指令導入到我們打算顯示它的項目或根模塊中。 在命令提示符下啟動上述命令以創建一個新的角度項目。 請嘗試下面列出的命令之一，以確保所有必需的庫都安裝到我們的項目中。 對於開發人員來說尤其如此，他們可以直接在我們的應用程序中使用庫和模塊，而無需處理將庫和模塊添加到根模塊的步驟。

Mat 圖標 Svg

maticon svg是一種簡單的矢量圖形，可用於表示圖標或徽標。 圖形可以在不降低質量的情況下調整大小，並且可以輕鬆編輯或更改。

使用角度材料 mat-ion 組件，我們可以生成局部 SVG。 我們在構造函數中註入 MatIconRegistry 服務和 DomSanitizer。 registerIcons() 函數包括參數 load 和 URL，以及一個名為 load 的私有函數。 如果我們使用這個變體，我們只需要添加圖像文件的名稱。 如果您使用的是字符串，則 icon.service 加載函數會略有不同。 圖像名稱將通過使用索引作為加載函數中圖像名稱的鍵來生成。 現在必須在應用程序開始加載時激活該服務。 閱讀和維護代碼要容易得多，因為它更具可讀性。 我們已將圖像分成不同的部分，並實現了更簡單的服務。