首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在Angular材质中使用第二个后,自定义SVG图标样式会发生变化?

在Angular材质中使用第二个后,自定义SVG图标样式会发生变化的原因是由于Angular材质库的工作原理导致的。

Angular材质是一个UI组件库,它提供了一套丰富的可重用UI组件,包括按钮、卡片、表单控件等。这些组件使用了一些预定义的样式和布局规则,以确保整个应用的一致性和可维护性。

当我们在Angular材质中使用自定义SVG图标时,实际上是将SVG图标作为一个组件来使用。在使用组件的过程中,Angular材质会为这个组件应用一些默认的样式和布局规则,以确保图标的显示效果符合整体设计风格。

然而,当我们在同一个页面中使用了多个自定义SVG图标组件时,由于Angular材质的工作原理,它会将这些组件的样式进行合并处理。这意味着第二个自定义SVG图标组件会继承第一个组件的样式,从而导致样式的变化。

为了解决这个问题,我们可以采取以下几种方法:

  1. 使用不同的CSS类名:给每个自定义SVG图标组件添加不同的CSS类名,以避免样式的冲突和继承。
  2. 使用CSS作用域:在Angular中,我们可以使用CSS作用域来限定样式的作用范围。通过为每个自定义SVG图标组件添加独立的CSS作用域,可以确保它们之间的样式不会相互影响。
  3. 自定义样式:如果我们需要对自定义SVG图标的样式进行更加精细的控制,可以通过自定义CSS样式来覆盖Angular材质的默认样式。可以通过在组件的CSS文件中定义特定的样式规则,来修改图标的颜色、大小等属性。

总结起来,当在Angular材质中使用第二个后,自定义SVG图标样式会发生变化是因为Angular材质的工作原理导致的样式合并。为了解决这个问题,我们可以使用不同的CSS类名、CSS作用域或自定义样式来控制自定义SVG图标的样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常见问题 - 构建文档 - ckeditor5文文档

为什么编辑器过滤掉我的内容(样式,类,元素)? config.allowedContent = true在哪里? 不像CKEditor 4, CKEditor 5实现了自定义数据模型。...由于编辑器中使用自定义数据模型,源代码模式CKEditor 5没有意义。...包含未使用的功能毫无意义,因为它们增加编辑器的大小并使网站变得更重。 这就是为什么我们不提供类似于我们CKEditor 4提供的完整编辑器包的原因。...同时,我们建议您安装插件以启用其他功能,甚至创建自定义版本以确保您充分利用CKEditor 5。 如何自定义CKEditor 5的图标?.../bold\.svg/,         '/absolute/path/to/my/icon.svg'     ) ] 你还可以使用相对于导入bold.svg的资源(本方案的BoldUI类文件)的相对路径

5.5K40
  • 适合前端开发 和UI 设计的20多个最佳 ICON 库

    如果希望使用web字体而不是静态文件来显示图标,那么FlatIcon 将负责格式转换并生成一个可以使用的 web 字体。我们还可以自定义下载的图标。...可以立即自定义图标:大小,颜色,阴影以及 CSS 可以完成的所有操作。 该产品不需要 Javascript。 Fontisto 图标是矢量,这意味着它们高分辨率显示器上看起来很好。...该网站上,我们可以找到有关如何启动和自定义产品的完整文档和各种指南。 我们只需将链接粘贴到网站上即可开始使用该产品。...自然,它们是完全免费的,并且可以GitHub上使用。 我们甚至可以使用CDN版本的样式表将这些图标直接添加到的站点中,它也支持 SVG 和 Web 字体。...这也是引导时为团队设置的默认图标。 它还可以作为SVG图标以及其他格式使用。该许可证对任何商业或个人用途都是免费的。 每个图标都是完全可伸缩的,并且可以直接在CSS维护。

    3K20

    小程序实践:基础内容icon,关于图标的5个实现方案等

    回到我们的矢量字体图标方案上来。既然字符可以字体文件里定义,图标为什么不可以呢?我们可以定义任何一个矢量图形,与一个unicode对应,哪怕这个unicode在其它字体已被使用也没有关系。... 两个text组件上使用了两次自定义图标样式。...如果想进行复杂的编辑,可以将矢量图下载下来,使用矢量图编辑软件,例如Sketch,进行编辑,编辑完成导出svg格式,在上面这个位置上传,就可以替换原图标。 ? 这是使用矢量字体图标的方案。...使用svg这种方案,避免了格式转换,svg信息可以作为文本直接内嵌于程序,不存在浏览器加载字体文件格式兼容的问题。简单方便,依赖少,因此它是Web开发图标方案的首选。...有两个方法: a)通过谷歌浏览器开发者工具,定位到具体组件的样式: ? 可以看到url指向的是一个内嵌的svg矢量图数据。新的tab页打开,可以直接保存为svg文件,Sketch软件编辑。

    2.1K00

    更加优雅的使用Icon

    前言 这可能是目前最便捷、最合适的 Icon 使用方式了,特别是 Vue3 ,等等,你以为它只是适用于 Vue3?...SVG Icon ,然后再写一个 Vue 组件 统一的去加载它,每次需要使用图标时就去下载一个 SVG 图标到 Icon 模块使用组件并传入...这种方式估计也是当下大多数同学 Vue2 项目中正在使用的。 那么可能有人问,这种方式 Vue3 不适用了吗? 不,它依然适用。那我们为什么要改呢? 这可就要好好说道说道了。...所以此文我们讲的还是使用 SVG Icon,不同的是使用方式变了,也正如标题所说,这种方式更为优雅!!! 嗯?为什么使用 SVG Icon? 嗯,你还不知道为什么使用 SVG Icon?...一部分人刚开始使用这种方式觉得不太适应,当你使用久了就会发现这种方式使用真的超级便捷,因为我们不需要再去写 CSS Class 类然后再写样式去改变图标,写一个图标只需要引入和使用就行了,至于样式修改

    6.7K41

    04-移动端开发教程-在线字体

    这就意味着@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4....-- 需要字体图标的地方添加i标签,并添加图标样式类 --> 第二种:直接下载bootstrap压缩包... /* 自定义在线字体,浏览器自动下载下面的字体文件 */ @font-face { font-family: 'glyphicons'; src: url('....此在线工具可以选择图标、增加图标、修改图标、移动图标、上传图标等操作,操作完成选择要下载的图标然后选择右下角的生成字体,然后就可以下载字体了。...字体下载下来,可以直接用它提供的字体文件和样式类型文件。 其他: 定制自已的字体图标库 http://iconfont.cn/

    3.3K60

    React | 如何制作一个按钮组件

    概要本文从零开始,使用React + TypeScript的方式制作一个按钮组件。面临的挑战起个好名计算机,有一个经常遇到但又十分难缠的问题,起名。好的名字可能是灵感闪现,也可能来自借鉴。...值得一提的是,如果你想在TypeScript“继承”属性,并且添加自定义,你可以这样写:export interface ButtonProps extends React.HTMLAttributes...给点颜色在按钮的使用场景使用主要,次要,危险等颜色。不同的组件库,所选的这几种主题略有差别。见下面:设计颜色不在行,来到代码层面,该怎样实现呢?......省略 };按钮结合图标图标有两种,一个是静态的,一个是loading。无需重绘按钮,因为本身就是可以button内部加入图标与文字,只需要注意对其方式即可。...这些钩子的第二个参数就是让我们来告诉React,哪些需要真渲染,哪些需要使用缓存。useCallback(() => { // doSomeThing}, []) 空数组表示只创建时生成并缓存。

    19930

    我至今没想到,我也能在 CSS 实现 SVG 动画了

    第一个限制是,当属性值发生变化时,自动触发转换。这在某些场景下是不方便的。例如,我们不能有一个无限循环的动画。 第二个限制是转换总是有两个步骤:初始状态和最终状态。...在这个样式,我们设置了 元素的大小,并更改光标类型以表明它是可单击的。但是要设置线条的颜色和粗细,我们将使用 stroke和stroke-width 属性。...我们的第二个 SVG 动画是一个显示耳机图标的静音按钮。...不过,矢量图像编辑软件创建的 SVG 图标不太可能使用相对单位。无论包含图标SVG 元素的宽高比如何,我们都希望确保图标的宽高比得到维护。...因此,为了使这种级别的控制成为可能,我们将使用 viewBox 属性。 本例,我将其转换为 100 x 100 像素的 viewBox。 让我们确保图标居中并且大小合适。

    1.2K10

    好用,好看的轮子来一波~~

    但不太友好的地方就是样式有点丑了需要自己再去美化 其特点如下: 1.支持常见的 toast / loading / dialog / fail 等状态提示 2.全局使用 flex 布局,自适应兼容性好...3.专为移动端设计,但 PC 和移动端都可使用 样式、动画、颜色、图标等都支持自定义 二、FilePond:是一款很棒的前端上传插件,功能强大而且样式很漂亮。...5.响应式:可在移动和桌面设备上使用。 他的核心库是用普通JavaScript编写的,可以在任何地方使用。...并且提供了React、Vue、Svelte、Angular、jQuery适配功能,采用什么框架都可以使用他 是不是觉得很棒 3、Anime.js:Anime.js是一个轻量级的JavaScript动画库...5、css.gg:超过700+纯CSS、SVG的开源图标,可以满足我们日常开发图标

    1.4K10

    Vite项目当中的SVG图标的配置及图标全局组件的封装

    为什么使用 SVG 图标开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后,页面上加载的不再是图片资源,这对页面性能来说是个很大的提升,而且我们SVG文件比img要小的很多。...安装 SVG 依赖插件 pnpm install vite-plugin-svg-icons -D vite.config.ts 配置插件 import { defineConfig } from...,属性值务必 #icon-图标名字 use标签fill 属性性可以设置图标的颜色(如何设置失败,检查你复制的这个 svg 图标代码是否有这个 fill 属性,如果有就将其移除掉,就可以使用了) 如果需要调整图标的大小...href="#icon-phone"> 可以看到,项目中可以使用 SVG 图标了,但是有一点不好的就是这样用起来有点麻烦,这个时候我们就可以进行ICON...import '@/styles/index.scss' // 引入全局样式 const app = createApp(App) app.use(globalComponent) // 安装自定义插件

    31100

    每个前端都需要知道这些面向未来的CSS技术

    [image.png] CSS,我们可以使用-webkit-scrollbar来自定义滚动条的外观。...不过,随着技术的革新,Web的应用当中SVG使用越来越多,特别是SVG 图标相关的方面的运用。...,面对多种设备终端,或者说更易于控制图标颜色和大小,开始使用**Icon Font**来制作Web图标 当然,字体图标是解决了不少问题,但每次针对不同的图标使用,需要自定义字体,也要加载相应的字体文件...,相应的也带了一定的问题,比如说跨域问题,字体加载问题 随着SVG的支持力度越来越强,大家开始思考SVG使用SVG来制作图标。...26px"> 使用SVG图标还有一优势,我们可以CSS中直接通过代码来控制图标的颜色

    63530

    图标,大学问

    基于这些特点,普通的团队中使用自定义字体图标是相当困难的。不过好在还有不普通的团队,比如 FontAwesome,他们专门制作、维护了一组免费图标贡献给开源社区。...其一是 svg 各个元素的 id 并入页面的命名空间中,比如在 svg 引用了一个名为 a 的过滤器,那么如果 html 或另一个 svg 也定义了它,就会互相冲突。...稍大点的项目中要解决这种冲突相当麻烦。其二是如果这个图标出现很多次,它的内容就会在 html 重复很多遍,体积也相应的增大。 好在,svg 有一种机制可以解决这个问题,也就是use 标签。...当然,如果你使用 Angular 这样的现代框架,你就不需要为此做什么额外的工作了。你只要把每个图标做成一个组件,使用 svg 内容作为模板,然后像普通组件一样引用它就可以了。...Angular 自动帮你优化掉没有引用过的组件。 第二个问题是 SPA。现代的前端应用基本上都是单页面应用(SPA),因此往往并不需要同时下载大量的图标,而是按需加载。

    1.3K10

    每个前端都需要知道这些面向未来的CSS技术

    image.png CSS,我们可以使用-webkit-scrollbar来自定义滚动条的外观。...虽然该规范已经存在很久了,但很多有关于SVG相关的特性不同的浏览器得到的支持度也是有所不一致的。特别是SVG的渐变和滤镜相关的特性。...不过,随着技术的革新,Web的应用当中SVG使用越来越多,特别是SVG 图标相关的方面的运用。...,或者说更易于控制图标颜色和大小,开始使用Icon Font来制作Web图标 当然,字体图标是解决了不少问题,但每次针对不同的图标使用,需要自定义字体,也要加载相应的字体文件,相应的也带了一定的问题...,比如说跨域问题,字体加载问题 随着SVG的支持力度越来越强,大家开始思考SVG使用SVG来制作图标

    90540

    从 Web 图标演进历史看最佳实践

    Web 产品引入图标,大致经历过如下几个阶段:使用独立的图片来引入图标使用 CSS sprites 技术、使用字体图标(font icons)、使用 SVG(inline SVG/SVG sprites...二、CSS Sprite 后来大约本世纪初的头几年,人们找到了一种新的技巧:通过将图片合并技术(image sprite)引入前端,将数量众多的图标图片进行巧妙拼合,并且样式通过 background-position...某些浏览器下,处于私有使用区的图标默认字体下甚至显示为一个方块字符。...使用 React/Vue/Angular/Svelte/…… 等各种框架的过程,我们已经习惯于将视图逻辑通过组件进行拆解和复用。...这个 API 返回图标图标的图形数据(SVG 源文件)和元数据,整个流程主要有两个消费者:给设计团队使用的 Sketch 插件,以及前端的编译/发布服务。

    1.7K10

    这些CSS的新特性还是有必要进来瞧瞧的

    image.png CSS,我们可以使用-webkit-scrollbar来自定义滚动条的外观。...不过,随着技术的革新,Web的应用当中SVG使用越来越多,特别是SVG 图标相关的方面的运用。...,或者说更易于控制图标颜色和大小,开始使用Icon Font来制作Web图标 当然,字体图标是解决了不少问题,但每次针对不同的图标使用,需要自定义字体,也要加载相应的字体文件,相应的也带了一定的问题...,比如说跨域问题,字体加载问题 随着SVG的支持力度越来越强,大家开始思考SVG使用SVG来制作图标。...26px"> 使用SVG图标还有一优势,我们可以CSS中直接通过代码来控制图标的颜色:

    80020

    每个前端都需要知道这些面向未来的CSS技术

    image.png CSS,我们可以使用-webkit-scrollbar来自定义滚动条的外观。...虽然该规范已经存在很久了,但很多有关于SVG相关的特性不同的浏览器得到的支持度也是有所不一致的。特别是SVG的渐变和滤镜相关的特性。...不过,随着技术的革新,Web的应用当中SVG使用越来越多,特别是SVG 图标相关的方面的运用。...,或者说更易于控制图标颜色和大小,开始使用Icon Font来制作Web图标 当然,字体图标是解决了不少问题,但每次针对不同的图标使用,需要自定义字体,也要加载相应的字体文件,相应的也带了一定的问题...,比如说跨域问题,字体加载问题 随着SVG的支持力度越来越强,大家开始思考SVG使用SVG来制作图标

    76530

    AngularDart Material Design 应用布局 顶

    自述 应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。...要在Angular组件中使用这些样式,只需将其添加为Component注解的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式,以便您可以根据需要轻松覆盖样式值。...material-navigation 导航元素将显示头部的左侧。 仅使用锚标签,material-button内置自己的样式。...,如果列表内容不是直接在抽屉(也就是说,它包含在另一个组件),则必须使用mixin提供上面的样式。...Outputs: visibleChange Stream  抽屉的可见性发生变化时触发事件。 注意:直到动画完成才会触发。

    4K30

    高效地将 TailwindCSS 与 Nuxt 结合使用

    我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用,而不是直接使用图像或 SVG 图标,以及如何基于给定图像为 TailwinCSS 构建自定义调色板。...TailwindCSS 的 Nuxt 模块自动添加所需的代码,以便在生产过程清除 CSS 代码,后面是按名称引用任何使用的 CSS 样式的文件列表,如下例所示: purge: { //enable...接下来,让我们看看如何利用 TaiwindCSS 应用程序构建和使用图标,而不是直接使用图像或 SVG 图标的经典方式。...将 SVG 图标与 TailwindCSS 结合使用 应用程序中使用 SVG 图标是一种常见的做法。通过正确的图标,我们可以为用户提供出色的用户体验,并使应用程序更具吸引力和吸引力。...但使用 SVG 图标存在一些挑战,例如需要在应用程序目录手动创建和保存 SVG 文件或创建动态加载 SVG 图标的组件等。此外,选择要使用的正确图标包也可能是一个挑战。

    59720
    领券